GTM（グーグルタグマネージャー）でfacebookの詳細マッチングを設定する。

グーグルタグマネージャーでの詳細マッチングの設定を依頼される機会も増えたので方法をメモ。

入力値を取得

まずは必要となる値を取得。
変数の項目から新規追加で「DOM要素」を選択。
値にIDが設定されていれば、選択様式を「ID」で、そうで無ければ「CSSセレクタ」を選択し、「要素ID（セレクタ）」の箇所にIDの値または、CCSセレクタの値を記載して保存。
名称はそのまま変数（{{名称}}）として使うのでわかりやすいものにする。

DOM要素は通常テキスト取得になるため、フォームの入力値を取得する際は「属性名」に「value」を設定する。

適切な形式に変換

①で作成した変数を適切な形に変換するためにカスタムjavascriptを使用。
変数の項目から新規追加で「カスタムjavascript」を選択し、テキストエリアにコードを記載。
コードは一度に記載せず、必要となる値ごとに変数を作成して対応。

//取得した金額の値を数値のみ変換
function() {
	var fbValue = {{該当する変数名称}};
	fbValue = fbValue.replace(/ /g, '').replace(/円/g, '').replace(/,/g, '');
	fbValue = parseInt(fbValue, 10);
	return fbValue;
}

//取得した名前を「姓」の部分のみに変換
function() {
	var fbName = {{該当する変数名称}}.split(' ');
	return fbName[1];
}

//取得した名前を「名」の部分のみに変換
function() {
	var fbName = {{該当する変数名称}}.split(' ');
	return fbName[0];
}

//取得した電話番号を数字のみに変換
function() {
	var fbPhone = {{該当する変数名称}};
	fbPhone = fbPhone.replace(/-/g, '');
	return fbPhone;
}

cookieを使用して値を保持

確認画面で取得した値を最後まで保持できるようcookieに代入して値を完了画面に遷移するまで保持。

変数の項目から新規追加で「ファーストパーティーCookie」を選択。
「Cookie名」に代入するcookieの値を入力して保存。

次にタグの項目から新規追加で「カスタムHTML」を選択し、テキストエリアに下記コードを記載。
作成したタグ処理のタイミング（トリガー）は購入ボタンをクリック時に設定する。

//クッキーに変換
<script>
	var cookieValueF = encodeURIComponent({{該当する変数名称}});
	var cookieValueL = encodeURIComponent({{該当する変数名称}});
	var cookieValueP = {{該当する変数名称}};
	var cookieValueM = {{該当する変数名称}};
	var cookieValueV = {{該当する変数名称}};

	document.cookie = "該当するCookie名=" + cookieValueF;
	document.cookie = "該当するCookie名=" + cookieValueL;
	document.cookie = "該当するCookie名=" + cookieValueP;
	document.cookie = "該当するCookie名=" + cookieValueM;
	document.cookie = "該当するCookie名=" + cookieValueV;
</script>

詳細マッチングタグに値を設定

最後にタグの項目から「カスタムHTML」を選択し、テキストエリアに、Facebookから提供されているコードを記載し、値の箇所に変数で作成した「ファーストパーティーCookieの変数」を記載して完了。
タグの処理タイミング（トリガー）は完了画面表示時に。

<script>
fbq('init', '○○○○',{
	em:'{{該当するファーストパーティーCookieの変数名}}',
	ph:'{{該当するファーストパーティーCookieの変数名}}',
	fn:'{{該当するファーストパーティーCookieの変数名}}',
	ln:'{{該当するファーストパーティーCookieの変数名}}',
});
</script>

タグの設定後は「公開」をクリックして完了

全ての設定が完了したら「プレビュー」よりエラーを確認し、「公開」ボタンで処理を開始して完了。