今回のブログはタイトルの通り、Account Engagement(旧Pardot)(以降AEという)のreCAPTCHA機能についてです。私自身AEを使って、お客様のマーケィングの自動化をお手伝した経験があり、その時に悩んだ所だったので、備忘録として記載しようと思います。
この記事はこんな方にお勧め！！
・reCAPTCHAのエラーメッセージを日本語化したい！それだけ！
フォーム画面の各エラーメッセージについて
早速本題に入っていきましょう！
以下イメージようにの「私はロボットではありません」と表示されている部分が今回の主役である「reCAPTCHA」機能です！
フォーム画面に表示されている項目はエラーになると以下のように英語で表示されます。エラーメッセージは英語がデフォルトとなっていますので、国内のお客様向けに日本語化の対応が必要となります。
項目や画面上部のエラーメッセージは日本語に変えることは簡単にできます！
エラーメッセージの日本語化のやり方は以下ヘルプをご参照下さい。
ただしreCAPTCHAのエラーメッセージは通常の設定では変えられません！
reCAPTCHAは変更できなんのかーーーい！って突っ込みたくなりますよね。
少し中途半端感はありますが、「reCAPTCHAのエラーメッセージ」を日本語化にチャレンジしたいと思います！
それでは、一緒にやっていきましょう！Let’ｓ start！
修正対象は？
修正すべき対象は、フォームのテンプレートになります。
AEのフォームは基本テンプレートの上にフォームを配置するというイメージになるので、今回の修正対象はフォーム自身ではなくフォームのテンプレートが改修対象になります。
レイアウトテンプレート画面に遷移したら、「レイアウトテンプレートを編集」を押下します。
続いて、「レイアウト」タブを押下し、ソースの「ココにJavaScriptを埋め込みます。」と書かれた部分に貼付用ソースを埋め込みます。
貼付用ソース
--------------------------------------------------------------------------------------------------
<script type="text/javascript">
(function () {
const noLabes = document.getElementsByClassName('no-label'); // --- (1)
for (let i = 0; i < noLabes.length; i++){
if(noLabes[i].innerText == 'Invalid CAPTCHA'){ // --- (2)
noLabes[i].innerText ='CAPTCHAが無効です'; // --- (3)
}
}
}());
</script>
--------------------------------------------------------------------------------------------------
ソースでやっていることは単純です。
画面上のエラーメッセージのクラス名が「no-label」となっており(1)、該当クラスの要素をすべて取ってループを回して、「Invalid CAPTCHA」だったら(2)、日本語に置換する(3)といったことをやっています。貼付けて実際の画面を確認すると・・・
わーい！できました！
やったらものの15分もかからないで出来ますが、ここまでにかなり試行錯誤しました・・・(--;)はい。
最後に・・・・メンテは今後も必要です。
結構単純ではありますが、こういうのが時間かかってしまうんですよねぇ！少しでも皆さんの作業の効率化に役に立てればと思います。
貼付用ソースについては、他にももっと良い方法があるという方いたら、是非ご教授ください。
ES6仕様を使用してもっといまどきのやり方で実装したかったのですが、結局単純なJavaScript処理で実装となりました。少しカッコ悪いですが・・・。
また、今回のやり方は恒久的な対応ではないです。ソースを見て頂ければ分かる通り、「no-label」のクラスありきの実装となっているため、salesforceの仕様が変わってしまうと、影響が出てきます。そのため担当者の方は継続してウォッチしないといけない実装内容となっていますので、ご使用の際はご注意下さい。
最後まで、読んで頂きありがとうございました。
それでは、よいsalesforceライフを、お過ごしください！
