ウェブ デベロッパーが購入情報変数を設定するコードを作成したら、データを検索広告 360 に渡すことができるように Floodlight タグまたはイベント スニペットを更新する必要があります。
Google タグマネージャを使用する場合は、ecommerce.purchase.products 配列にプッシュしたデータを使用するようにコンテナを更新するか、データを Floodlight タグに渡すマクロを作成する必要があります。
タグを手動で更新する
購入情報を Floodlight タグに直接渡す場合、通常は、ウェブ デベロッパーが、JavaScript オブジェクトや DOM 内のカスタム変数として購入情報変数を対象ページで使用できるように設定しています。
たとえば、ウェブ デベロッパーが floodlightSpec という JavaScript オブジェクトで購入情報を利用できるように設定している場合は、Floodlight イベント スニペットを次のように更新する必要があります。
<!--
Event snippet for Thank You on http://www.example.com/thanks: Please do not remove.
Place this snippet on pages with events you’re tracking.
Creation date: 11/01/2017
-->
<script>
gtag('event', 'purchase',
{
'allow_custom_scripts': true,
'send_to': 'DC-1234567/group1/thank123+transactions',
'transaction_id': floodlightSpec.sessionID,
'value': floodlightSpec.revenue,
'items': [
{ 'id': floodlightSpec.item[0].id,
'price': floodlightSpec.item[0].price,
'quantity': floodlightSpec.item[0].number
},
{ 'id': floodlightSpec.item[1].id,
'price': floodlightSpec.item[1].price,
'quantity': floodlightSpec.item[1].number
}
],
'country': floodlightSpec.country,
'language': floodlightSpec.lang
}
);
</script>
<noscript>
<img src="https://ad.doubleclick.net/ddm/activity/src=1234567;type=group1;cat=thank123;
qty=1;cost=floodlightSpec.revenue;dc_lat=;dc_rdid=;
tag_for_child_directed_treatment=;tfua=;npa=;
ord=floodlightSpec.sessionID;prd=i1:floodlightSpec.item[0].id|p1:floodlightSpec.item[0].price|q1:floodlightSpec.item[0].number|i2:floodlightSpec.item[1].id|p2:floodlightSpec.item[1].price|q2:floodlightSpec.item[1].number|c:floodlightSpec.country|l:floodlightSpec.lang?" width="1" height="1" alt="">
</noscript>
<!-- End of event snippet: Please do not remove -->
注: 検索広告 360 で生成されたイベント スニペットには、Floodlight イメージタグを含むオプションの <noscript> タグが含まれます。このタグは、JavaScript に対応していないブラウザでのコンバージョンについてレポートを作成する際に使用されます。
Google タグマネージャを使用してタグを更新する
Google タグ マネージャーを使用すると、サイトのタグを効率的に管理できます。サイトでタグを直接追加したり更新したりするのではなく、Google タグ マネージャーで追加や更新を行います。Google タグマネージャが必要に応じて正しい形式のタグをサイトに出力します。詳しくは、Google タグマネージャの説明をご覧ください。
購入情報など、動的に生成されるデータを Google タグマネージャの管理下のタグに渡す必要がある場合、ウェブ デベロッパーは次のいずれかを行うことができます。
データレイヤからデータを使用する
ウェブ デベロッパーが購入情報変数をデータレイヤで利用できるようにしている場合は、次の手順に沿ってデータを Floodlight タグに渡します。
- dataLayer.push メソッドを使用して Google タグマネージャのデータレイヤでデータを利用できるようにする。
-
Google タグマネージャで、サイトのコンテナに移動します。
-
[タグ] タブをクリックして、売り上げのレポートを作成する Floodlight トランザクション タグをクリックします。
-
鉛筆アイコン
をクリックして、タグに変更を加えます。
-
[商品レポート] で、[商品単位の販売データを提供する] チェックボックスをオンにします。
-
[データソース] のリストで、[データレイヤー] を選択します。
Google タグマネージャはデータレイヤーにプッシュされたデータを ecommerce.purchase.products アレイで自動的に使用します。 -
[保存] をクリックします。
をクリックして、タグに変更を加えます。変数を使用して他のデータにアクセスする
ウェブ デベロッパーが購入情報変数をデータレイヤー以外の場所で利用できるようにしている場合は、次の手順に沿って、Google タグマネージャ変数（以前のマクロ）を使用してデータを渡します。
-
データをデータレイヤー以外の場所（DOM 変数など）に出力する。
-
Google タグマネージャで、サイトのコンテナに移動します。
-
[タグ] タブをクリックして、売り上げのレポートを作成する Floodlight トランザクション タグをクリックします。
-
鉛筆アイコン
-
[商品レポート] で、[商品単位の販売データを提供する] チェックボックスをオンにします。
-
[データソース] のリストで、次のいずれかを選択します。
-
JavaScript 変数: データの形式が JavaScript 変数の場合。
-
Floodlight 形式の値: データの形式が文字列の場合。
-
-
[商品データ] の横にある「変数を追加」アイコンをクリックします。
-
右上にある [新しい変数] ボタンをクリックします。
-
変数設定カードの鉛筆アイコン
-
目的の変数タイプを選択します。たとえば、データが JavaScript 変数で利用できる場合は、[JavaScript 変数] を選択します。
-
次の欄に、データを格納するオブジェクトの名前を入力します。
たとえば、グローバル JavaScript 変数として文字列を出力するページは次のようになります。
<script> window.salesData="i1:sku-12345|p1:100.0|q1:1|i2:sku-67890|p2:20.0|q2:2" </script>
-
-
変数に名前を付けます。上部にある名前空間を編集するか、保存をクリックした後に表示されるウィンドウで名前を編集してください。編集した名前は、[商品データ] 内で二重かっこに囲まれて表示されます。
-
もう一度 [保存] をクリックして、下書きバージョンのタグを更新します。