ハッシュメール計測用タグ実装例¶

Email計測は全タグでユーザのメールアドレスをタグに代入する事を推奨しています。
しかし、サイト構成上特定の箇所のみでの代入となる、なおかつサーバーサイドからemail値を出力できない場合はこちらのガイドを参照ください。

ハッシュメールをタグに入れるにあたって、サーバーサイドからメールを出力できない、あるいはdataLayerなど、動的変数の格納場所に格納されていないという場合、クライアントサイドのフォームなどに入力されるメールをJavaSriptで取得するという代替方法があります。
ユーザーがメールを入力するページの代表的なものとして、ログインページや注文者情報フォームがあります。
今回は注文者情報フォームに入力されたメールアドレスを取得し、ハッシュしてタグにパスする方法をご紹介します。

目次¶

md5ハッシュ関数をインストール
ユーザーのメールを取得する
メールをハッシュする
ハッシュメール値をタグに入れる
タグ動作テスト

1 md5ハッシュ関数をインストール¶

1 JavaScript md5ハッシュ関数をサポートセンターからコピー。

dl_function

2 テキストファイルにペーストし、hash.jsと名前をつけ、任意のjsディレクトリに保存。 js_directory

このjsファイルを読み込み、md5関数を以下のように呼ぶと、"test"という引数をハッシュ化します。

<script type="text/javascript" src="js/hash.js"></script>
<script>
    md5("test");
</script>

3　MD５ハッシュ関数をテストする。(テストしない場合は直接２番に進んでください)

テスト用htmlファイルを作成し以下のスクリプトをペーストする。

<html>
    <head>

<script type="text/javascript" src="js/hash.js"></script>
<script>
    alert("md5->"+md5("test"));
</script>

    </head>
</html>

test_md5.htmlと名前を付け、hash.jsが入っているjsフォルダーと同じ階層に保存。 dl_function

test_md5.htmlをブラウザで開き、alertメッセージの中にhash値が出るのを確認。 dl_function

2 ユーザーのメールを取得する¶

クライアントサイドでユーザーのメールを取得します。今回は注文者情報フォームに入力されたメールアドレスを取得し、ハッシュして、タグにパスする方法をご紹介します。

form

参照の仕方は実際のHTMLエレメントの構成に依りますので、以下の例に従っても取得できない場合は、お客様のフォームに合ったスクリプトを提供させていただくことも可能ですのでご相談ください。


//id = "mail"を参照する場合
document.getElementById("email").value

//name = "mail"を参照する場合
document.getElementsByName("email")[0].value

//type = "email"を参照する場合
document.querySelectorAll("input[type='email']")[0].value

jQueryをお使いのサイトでは、jQueryのセレクタを使ってもemailを参照することができます。


//jQuery　使用無

//id = "mail"を参照する場合
$("#email").val()

//name = "mail"を参照する場合
$("input[name='email']").val()

//type = "email"を参照する場合
$("input[type='email']").val()

3 メールをハッシュする¶

フォームからメールを取得する際、emailを含むエレメントをcto_emailという変数に入れ、その値をハッシュ関数を使ってハッシュします。
ハッシュした結果をcto_hash_emailという変数に入れます。エラーメッセージを防ぐため、以下の例の様にemailが正しく参照できたときのみ変数に値が入るようにすることをお勧めします。



// cto_hash_email変数を初期化　これによって、メール取得ができなかった場合はemail値の代わりに空の値をタグに入れ、タグ発火時にundefind変数によるエラーが出るのを防ぎます。
var cto_hash_email="";

// 上記で紹介した例に従って、emailの入力フィールドを参照してcto_email変数に入れる。

var cto_email = document.getElementById("email");

// emailを含むエレメントが正しく参照できており、なおかつ、値が空になっていない場合のみcto_email変数にemail値を入れてハッシュする作業を実行します。
if(cto_email!== null && cto_email.value!==""){
     cto_hash_email = md5(cto_email.value); 
}

確認方法
¶

１、Chromeでフォームのページを開く
２、メールのフィールドにtest@test.comなど、仮の値を入力
２、F12を押して開発者ツールを開く
３、コンソールタブをクリック
４、メールを取得するスクリプトをペーストし、Enterを押す
console ５、cto_emailとコンソールに打ち、test@test.comと平文メールが出るのを確認
６、同様に、cto_hash_emailとコンソールに打ち、b642b4217b34b1e8d3bd915fc65c4452　とハッシュ値が出るのを確認 console2

4 ハッシュメール値をタグに入れる¶

cto_hash_emailに正しく値が入っているのが確認できたら変数を以下のように、Criteoのタグに入れます。
メールの取得
ハッシュ化
タグの発火
これら一連の作業を確認画面へ進むボタンのオンクリックイベントで起動させるため、cto_crossDevice()という関数にします。


<script type="text/javascript" src="//static.criteo.net/js/ld/ld.js" async="true"></script>
<script type="text/javascript">

//onClick属性として起動できるよう、関数にする

function cto_crossDevice(){

// メール取得
var cto_hash_email="", cto_element = document.getElementById("email");
if(cto_element !==null && cto_element.value !==""){
     cto_hash_email = md5(cto_element.value);
}
// Criteoタグに入れる
window.criteo_q = window.criteo_q || [];
window.criteo_q.push(
        { event: "setAccount", account: {{accountid}} },
        { event: "setEmail", email: cto_hash_email },
        { event: "viewSearch"}
);
}
</script>

この関数を、確認画面へ進むボタンのエレメントににonClick属性としてバインドします。これによって、ユーザーがフォーム入力完了し、次のページに遷移する時にハッシュメール値がタグにパスされ、タグが発火します。

    <input type="submit" onclick="cto_crossDevice()" value="確認画面へ進む">

5 タグ動作テスト¶

４までの手順で実装は完了です。次にタグの発火と、メール値の取得を確認する方法の一つをご紹介します。

確認方法
¶

１、Chromeでフォームのページを開く
２、メールのフィールドにtest@test.comと、仮の値を入力
２、F12を押して開発者ツールを開く
３、ネットワークタブをクリック
４、フィルターのアイコンをクリックし、検索フィールドにcriteoと打つ
５、Preserve logのボックスをチェックする
tagcheck ６、確認画面へ進むボタンをクリック
７、ネットワークタブにcriteoのwidgetコールがでてきたらタグが発火している証拠です。
８、widgetコールのHeadersをクリックし、Query String Parametersに、m=%5Bb642b4217b34b1e8d3bd915fc65c4452%5D というパラメータと値が確認できたら、ハッシュメールがタグに正しくパスされています。 email_param

最後に¶

以上でハッシュメール計測用タグの実装完了です。
ご紹介したものは一つの実装例に過ぎず、すべてのサイトに適用できるものではありません。
どのような実装が可能でなおかつ最適であるかは各サイトの構成に依りますので、ハッシュメール計測用タグ実装をご検討中の場合はお気軽にご相談ください。

ハッシュメール計測用タグ実装例¶

目次¶

1 md5ハッシュ関数をインストール¶

2 ユーザーのメールを取得する¶

3 メールをハッシュする¶

確認方法¶

4 ハッシュメール値をタグに入れる¶

5 タグ動作テスト¶

確認方法¶

最後に¶

確認方法
¶

確認方法
¶