GTMで簡単にFacebook手動詳細マッチングの変数設定をCOMPLETE

Facebook/Instagramの運用型広告は開始前に設定しておくべきことが多く、内容もだんだんとテクニカルのものになってきていますね。

今回はその中でも「手動詳細マッチング」の設定方法にフォーカスして説明できればと思います。

「手動詳細マッチングって何？」

という話はしませんので
ご存じない方は調べるか公式ヘルプをご覧ください。
https://www.facebook.com/business/help/611774685654668?id=1205376682832142

ざっくり申しますと
Facebook/Instagramでコンバージョン測定の精度を上げることができます。

そうすることで、
・コンバージョン数値を正しく把握する
・媒体の機械学習も精度があがり配信結果も向上する
などが期待できます。

というわけで、
Facebook/Instagram広告を実施するのであれば
基本的にはマストで設定すべき項目です。

しかしながら、メールアドレスや電話番号などのユーザーデータを変数として取得し、Facebook側に渡す必要があります。

この変数作成（設定）の部分で躓く方が多いため、
参考になればと思い簡単に２パターンに分けて記載していきます。
（1:変数自体はクライアントが作成 / 2:変数作成から代理店で実施）

基本的に代理店目線で書いていますが
インハウスの方にも参考になるかと思います。

なお、以下は全て、Google Tag Manager（GTM）を
用いた設定の話をしています。

1. クライアントに変数作成いただく場合

詳細マッチングの趣旨をクライアントに説明後、
クライアントがサイトのソースコード上に変数を作成してくれるパターンです。

この場合は、ありがたく変数を使わせていただくのが吉ですが
以下のような大きな大きな間違いをしているケースを多々見かけます。

クライアント「emailとphoneという変数を作り、そこに動的に値が入るようにしました！」

代理店「じゃあ設定するぞ！GTMのカスタムHTMLで～・・・」
代理店「よし！出来た！」

↓　↓　↓　↓　↓

<!-- Facebook Pixel Code -->
<script>
 !function(f,b,e,v,n,t,s)
 {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
 n.callMethod.apply(n,arguments):n.queue.push(arguments)};
 if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
 n.queue=[];t=b.createElement(e);t.async=!0;
 t.src=v;s=b.getElementsByTagName(e)[0];
 s.parentNode.insertBefore(t,s)}(window, document,'script',
 'https://connect.facebook.net/en_US/fbevents.js');
 fbq('init', '◯◯◯◯◯',{
     em:'email',
     ph:'phone',
     });
 fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
 src="https://www.facebook.com/tr?id=◯◯◯◯◯&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->

はい。

このパターンです。
注目すべきはこの箇所です。

fbq('init', '◯◯◯◯◯',{
em:'email',
ph:'phone',
});

JavaScriptを少しでも触れたことがあれば分かると思いますが
これでは『何も動的に取得出来ていません』

ただただ、「email」と「phone」という
『文字列』をfacebook側に送っているだけになります。

GTMで変数を扱うためには
まずGTM側で変数と認識させるための設定が必要です。

次はその設定方法を見ていきましょう。

①グローバルJavaScript変数で定義されている場合

つまりサイトのコード上で

var email = hogehoge;
var phone = fugafuga;

などと定義さている場合ですね。

この場合はGTMの変数設定から
「JavaScript変数」を選択し変数名を記載するだけです。

今回のメールアドレスの例でしたら
「グローバル変数名」の箇所に「email」（var email = hogehoge; のvar と=の間の文字列）を記載すれば大丈夫です。

GTMの方の名前は自由です。
今回は「グローバル変数名」と同じにして「email」にしています。

なお、JavaScritpの変数定義の仕方には
「var」の他に「let」や「const」などがあります。
（これらの違いについては割愛）

上記の「JavaScript変数」が使用出来るのは
「var」で定義された変数のみになりますので、
念の為、頭の片隅に入れておくと良いかと思います。

②dataLayerで変数を渡してくれている

本来GTMで変数を扱うときの推奨は
こちらのデータレイヤー変数を使うという手法です。

クライアントにGTMの知識がある場合は
はじめからdataLayerで変数をpushしてくれている場合があります。

以下のような感じですね。

var email = hogehoge;
var phone = fugafuga;
window.dataLayer = window.dataLayer || [];
dataLayer.push({
    'DL_email' : email,
    'DL_phone' : phone,
});

このときはGTMの「データレイヤー変数」を使えばOKです。

GTMはWEBページで動作する際、dataLayerというJavaScript変数内へ様々なデータを一時的に格納し、参照しています。

このdataLayer変数にはGTMが自動的に追加や取得した変数のデータが格納されますが、意図的にHTML上から「dataLayer変数へ値を渡す」JavaScriptを動作させることで「GTMへデータを渡す」ことができます。

そしてその渡されたデータを変数として参照可能にしたものが、データレイヤー変数というわけです。

GTMへ変数を渡す方法としてGoogleが推奨しているのがこのデータレイヤーを用いた手法です。

理由としては簡単にデータが渡せることもありますが
データレイヤー変数であればソースを見たときに一目で、
「データレイヤー変数である（＝GTMで利用しているコードである）」ということがわかるという点も挙げられます。

つまり、サイト開発に複数人が関わっている場合に
「このコード何使ってるんだ・・・？いらなそうなら消しちゃうか」
とならない（dataLayerで記載されているということはGTMで使っている変数なんだな、と分かる）ということです。

ちょっと脇道にそれましたが
上記のようにデータレイヤー変数を選択し、
今回の例でいうと「DL_email」「DL_phone」を記載すればOKです。

①②いずれのケースにせよ、
これでGTM上で使える変数が作成出来ました。

作成した変数をタグで利用する方法については
次の「２」の解説の後にまとめてお話します。

今の段階で「変数は出来た！」という方は
しばらくスクロールしてもらってOKです。

2. クライアントが変数作成していない場合

代理店側で作成する必要がありますね。

「そんなこと出来るの？」

と思われるかもしれません。

基本的にJavaScriptの知識があれば、
GTMでほとんどなんでも出来ます。

サイトのHTMLコードを直接いじらなくても
GTMからサイト上の文字列を変更したり色を変えたり
レイアウトに手を加えることだってできちゃいます。

そのため逆にいうと広告主の方は
GTMの権限を渡す際に代理店が信頼出来るパートナーかどうかを
しっかり見極めてもらってから権限付与をした方がいいと思います。

さて、先に述べたように
JavaScriptの知識があれば基本的に動的に値を
取得するような変数を作れるのですが
「JavaScript」の部分がハードル高いですよね。

JavaScriptをバリバリ使うようでは、
タイトルにもある「誰でも簡単に」のコンセプトからは外れてしまいます。

そのため今回は、応用性は若干低いけど
特定の条件下においてはGTMの機能だけを使って
JavaScriptは一切書かないで設定する方法をご紹介できればと思います。

HTMLやCSSやJavaScriptを全く知らなくても
とりあえず設定は出来るようになると思います。

ただ、元のHTMLコードが変更されたりすると
途端に取得出来なくなったりする可能性もあります。

HTMLコードが改変（サイトリニューアルなど）がある場合は注意してください。

※応用性は低いと書きましたが、ダイナミック広告でItemIDや金額を取得したい、という場合にも使えると思います。※

では早速見ていきましょう。

①どこの値を取得するか？

基本的に、メールアドレスや電話番号の入力が必要なサイトって
確認ページやサンクスページに確認用の「メールアドレス」や「電話番号」が表示されますよね？

例えば、下記のようなフォームがあるとします。

入力して送信すると
こんな感じの確認ページに遷移することって
よくあると思います。

※もちろん、確認ページなどがない場合も結構あると思います。
その場合でもフォームの入力がある場合はクリックをトリガーにしてタグを発火させれば取得可能ですが、JavaScriptの記載が必要なのでここでは割愛します。

さて、ここからメールアドレスや電話番号を取得していきます。
どれを取得するにしても方法は同じなので、
以下では電話番号取得を例にして説明します。

②どうやるの？

i) まずはGoogle Chromeで、取得したい該当の箇所（今回の例なら電話番号）を右クリック

ii)検証をクリック

iii)すると、パネルが開き、おそらくデフォルトで「Elements」のタブになっていると思います。（なっていない人は「Elements」に移動）

「右クリックした箇所」がHTMLコード上でどの部分に当たるのかが、
青い背景で分かるようになっています。

iv)ここで、背景が青くなっている箇所をさらに右クリック
そして、「Copy」から「Copy selector」を選択します。

v)GTMを開いて変数のタブにいきます

vi)変数の新規作成⇒変数タイプで『DOM要素』を選びます

vii)適当に名前を付けます（今回は「変数-手動詳細」）

viii)『選択方法』で『CSSセレクタ』を選びます

ix)『要素セレクタ』で先程『Copy selector』でコピーしたものを、そのままペーストします。（素直にCtrl + V でOK）

この例だと「#tel」と簡単な表記になっていますが、
例えば以下のような凄い長ったらしくなることもあります。

「body > div.st-Container > section > div > p.tp-MainHeading_Title」

でもこれで問題ないです。

CSSが分かる人であれば何をしているか理解出来るかと思いますが
とりあえずこの記事では「内容の理解は出来なくても設定は出来る」を目標にしているので、何も考えずにコピペしましょう。
気になった人は自分で勉強してみましょう。

と、言いつつも仕組みを簡単に説明すると
取得する『位置』をセレクタというものを用いて指定しています。

「この位置に表示される文字列を取得してね～～」

というイメージです。

そのため、最初に述べたように
サイトリニューアルなどで構造（セレクタ）が変わると取得出来なくなります。

また、ユーザーごとに構造（セレクタ）が変わる場合もこの方法では難しいですね。

例えば、購入ページで
会員登録しているユーザーは『Copy selector』の内容が

#test > div > li:nth-child(13)

だけど、ゲストユーザーのときは

#test > div > li:nth-child(18)

のようになっているケースです。

ユーザーによってや何かしらのオプションによって取得したい箇所の『Copy selector』の内容が異なってしまうと、この方法で一律に変数取得は出来ません。

※『取得したい箇所のCopy selector』が変わってなければ、表示の見た目とか、他の構造が変わっていても問題ないです

ちょっと話が逸れましたが本題に戻りましょう。

x)無事『Copy selector』の内容をペーストしたら保存します。

xi)実際に取得出来ているかGTMでプレビューして見てみましょう。
GTMのプレビューは「タグチェック」だけ、と考えている人もいるかもしれませんが、実際は「イベント」や「変数」も確認できる優れものです。

xii)GTMのプレビュー画面で「DOM Ready」の「Variable」を見ます。

難しいことは割愛しますが、今回「DOM 要素」で変数取得しているので
Page View（Container Loaded）ではなくて、『DOM Ready』以降を見ます。

なお、ここで作った変数をタグで使う場合は、
トリガーをPageViewじゃなくて、『Dom Ready』にしましょう。

xiii)Variableの箇所で今回作った変数（「変数-手動詳細」）の欄を見てみると、中身は「09000000000」となっていて、無事に取得出来ています。

もう1度今回の仕組みを簡単にまとめると
「サイトの構造から取得する場所を指定」しています。
（CSSセレクタというもので指定）

ユーザーのアドレスや電話番号はもちろん人によって異なりますが、
確認ページやサンクスページで、『そのアドレスや電話番号がどこに表示されているか』の構造は中身に依らず同じです。だから、構造上の場所を指定することで、取得が出来るのです。
（前述のような例外もあります）

変数については以上です！！

タグの記載方法について

GTMで作成した変数を、タグなどで使う場合は「{{}}」（←二重の中括弧）で囲む必要があります。（実際は {{ まで打ち込んだ時点で候補が出てくると思います。）

Facebookのコードの書き方自体はヘルプにもあるので詳細は省きますが
通常

fbq(‘init’, ‘Pixel番号’)

となっている箇所を

fbq(‘init’, ‘Pixel番号’ , {
em: ‘{{変数-手動詳細2}}’,
ph: ‘{{変数-手動詳細}}’
})

などと書き直します。

この記事では「電話番号」を取得するために
「変数-手動詳細」を作成したため「ph」の後に記載しています。

メールアドレスについてはこの記事内では説明していませんが、
電話番号と同様に例えば「変数-手動詳細2」のような名前で作成したと思ってください。

これで、Facebookピクセルタグ上で変数として動作するようになります！

以上となります。

なお、LINEの Advanced Matchingなども同様な方法で可能です。

おまけの話

Facebookの手動詳細マッチングは
Facebookに送信する前に「自動でハッシュ化」して送ってくれますので
自分たちで予めハッシュ化する必要はないのですが
不安な方はハッシュ化したものを変数とすれば良いでしょう。

ただしこのハッシュ化は結構厄介です。
PHPなどであれば簡単にsha256ハッシュ生成できますが
JavaScript単体だとわりと大変です。

正確に言うとJavaScriptでも非同期関数が絡む処理（async function なんたら～）ができれば可能なのですが、GTM上で使用することは出来ません。

なのでカスタムJavaScritpでも作るのが難しいのですが
GTMのカスタムテンプレートを自作するという方法なら可能です。

内容はややハードですが
GTMではカスタムテンプレートの コアAPIとして
『sha256』を用意しているのでこちらを用いることで作成出来ます。
https://developers.google.com/tag-manager/templates/api?hl=ja#sha256

詳しくはこちらにまとめています。

興味ある方はご覧になってみてください。

Bye Bye.

広告運用に関して詳しくお話を聞きたいという企業様がいらっしゃいましたら、こちらからお問い合わせをお願い致します。

お問い合わせ | 株式会社デジタリフト

私たちの会社で働く事に少しでも興味を持っていただけたら、ぜひ応募フォームよりご連絡ください。

株式会社デジタリフト の全ての求人一覧