Google タグ マネージャーを使用して Floodlight タグに値を渡す

Google タグ マネージャーで Floodlight タグを実装する際、サイトからタグに値を渡すことで、主要なマーケティング パラメータを取得できます。取得したパラメータは、今後のオーディエンスの獲得に活用する、または特定のカスタム指標に関するレポートに利用することができます。

dataLayer は Google タグ マネージャー内の JavaScript オブジェクトであり、これを介してマクロに必要な値を渡すことができます。こうして取得した値を、後でタグに情報を挿入する際に使用できます。この記事では、dataLayer を使用して特にキャンペーン マネージャー 360 と通信する方法、および必要な値を Floodlight タグに渡す方法について説明します。さらに詳しい説明については、Google Developers サイトの Google タグ マネージャーのウェブ向け実装に関するページをご覧ください。

従来からの仕様として、新しく作成される Floodlight タグにはプレースホルダが含まれます。これらのプレースホルダは、タグが呼び出されるときに、ウェブ デベロッパーにより必要な値に置き換えられます。次のサンプルコードをご確認ください。

...
document.write('<iframe
    src="http://XXXXXXX.fls.doubleclick.net/activityi;src=XXXXXXXX;type=;cat=;u1=[item];u2=[quantity];u3=[price];u4=[postage];u5=[seller];ord=' + a + '?" width="1" height="1" frameborder="0" style="display:none"></iframe>');
</script>
...

太字の要素（item、quantity、price、postage、seller）は、Floodlight タグに渡す予定の実際の値に置き換える必要があります。一般的には、コンテンツ管理システムを使用して置き換えるか、自社の開発チームにコーディングを依頼します。

Google タグ マネージャーで変数を使用するよう設定し、タグの呼び出し時に値が挿入されるようにするには、以下の手順どおりに操作します。前提条件として、キャンペーン マネージャー 360 アカウントと対応する Google タグ マネージャー アカウントとの関連付けを済ませ、Google タグ マネージャーにタグを送信し承認できる状態にしておいてください。Google タグ マネージャーで変更を加えた後は、テストと公開の手順を通常どおり行うことができます。

構成

1. Google タグ マネージャーで、渡す必要があるそれぞれの値についてマクロを作成します。

   1. マクロにわかりやすい名前を付けます。たとえば、注文された商品の名前を取得する場合、マクロを「product_name」とすることができます。

   2. マクロのタイプを [データ レイヤ変数] に設定します。

   3. dataLayer 呼び出しで宣言する変数名を指定します。

   4. バージョン番号には、[バージョン 2] を選択します。

2. キャンペーン マネージャー 360 で、Floodlight タグを作成して標準変数 u を有効にします。

3. Google タグ マネージャーに Floodlight タグを送信して、承認します。

4. Google タグ マネージャーでタグを編集し、それぞれの u 変数に適切なマクロを割り当てます。たとえば、商品名を変数 u の「u1」から取得する予定であれば、次の手順を行います。

   1. [カスタム変数] に移動します。

   2. プルダウンをクリックして、「u1」を選択します。

   3. テキストボックスの横にあるマクロアイコンをクリックして、ステップ 1 で作成した「{{product_name}}」マクロを選択します（「product_name」が文字列ではなくマクロであることを示すために、かっこ「{{}}」が付きます）。

   4. 取得する他のすべての u 変数とマクロについて上記の手順を繰り返します。

実装

次のどの状況であるかによって、dataLayer の実装方法は異なります。

方法 1: 必要なすべての値を含む確認ページがすでにある場合

一部のウェブサイトでは、コンテンツ管理システム（CMS）または類似の方法を使用して、リクエストに応じてページが作成されます。CMS では、以前のページで設定された値や、バックエンド データベースからの値を渡すことができます。

これらの場合は、次のように操作します:

1. URL が確認ページの URL と同じ場合に Floodlight タグを呼び出すルールを設定します。

2. ウェブサイトの Google タグ マネージャーのタグの前に、次のような dataLayer 定義を挿入します。ここでは、角かっこ内のすべての要素を、渡そうとしている値に置き換えます（すべてのマクロ名は _value が付加されたものであるとします）。

   <script>
    var dataLayer = [{“item_value”:item_value,
        “quantity_value”:quantity_value,
        “price_value”: price_value,
        “postage_value”: postage_value,
        “seller_value”: seller_value}];
</script>

   値を入力したタグの例:

   <script>
    var dataLayer = [{“item_value”:”great shoes”,
        “quantity_value”: 1,
        “price_value”: 20,
        “postage_value”: 8,
        “seller_value”: “shoemaker”}];
</script>

Google タグ マネージャーから Floodlight タグが呼び出されると、指定したマクロは dataLayer 定義で指定した値に置き換えられます。

方法 2: 精算と確認のページの URL が同じ、またはページが AJAX（JavaScript メソッド）を使用

1. イベント発生後にタグを呼び出すルールを作成します。たとえば、「purchase_complete」というイベントを作成します。

   ルール名: fire_floodlight_tag
   条件: {{event}} equals purchase_complete
   このルールが適用されたタグ: なし

2. JavaScript を使用してイベントをトリガーし、必要な情報をすべて Floodlight タグに渡します。

   dataLayer.push = ({ “event”: “purchase_complete”,
    “item_value”:item_value,
    “quantity_value”: quantity_value,
    “price_value”: price_value,
    “postage_value”: postage_value,
    “seller_value”: seller_value});

   値を入力した JavaScript 呼び出しの例:

   dataLayer.push = ({ “event”: “purchase_complete”,
    “item_value”:”great shoes”,
    “quantity_value”: 1,
    “price_value”: 20,
    “postage_value”: 8,
    “seller_value”: “shoemaker”});

   追加したイベント値（上記の太字）は、Google タグ マネージャーが Floodlight タグの呼び出しに使用するイベントを伝えるために使用されます。

方法 3: 精算と確認のページの URL が同じ、またはページが AJAX（自動イベント トラッキング メソッド）を使用

イベントの自動トラッキングではイベント リスナーが使用されます。これは、ページ上に置かれユーザー イベントの発生を待機する特殊なタグです。ユーザー イベントが発生すると、他のタグの呼び出しに使用できるイベントがプログラムにより作成されます。ユーザー イベントのアクションには、ボタンやリンクのクリック、フォームの送信、指定の間隔でのタイマーの起動などがあります。

次の例では、リンククリック リスナーを使ってタグを呼び出す方法を示します。ここでは、ユーザーが商品を一覧でクリックするかプルダウンで選択するとイベントが発生し、PDF のパンフレットをダウンロードするページが表示されるという流れを想定しています。このページには、パンフレットのリンクがあり、そのリンクをクリックするアクションが、コンバージョンとして追跡するアクションです。

Google タグ マネージャー アカウントに移動し、次の操作を行います:

1. リンク クリック リスナーを設定します。

   1. [新しいタグ] を選択します。

   2. 「downloadLinkListener」のようにわかりやすい名前を PDF パンフレットのダウンロード リンクの名前として入力します。

   3. [タグ タイプ] プルダウンで [イベント リスナー] セクションにカーソルを合わせて、右側の展開されたプルダウンから [リンク クリック リスナー] を選択します。

   4. ユーザーに別のページを表示するリンクの場合、[タグの配信を待つ] チェックボックスを必ずオンにします。[最大待機時間] フィールドは変更しないでください。ただし、大量のタグを起動して、そのすべてが実行されるように徹底したい場合など、特別な理由がある場合は変更できます。

2. リンクがクリックされたときにその URL を取得するようにマクロを設定します。

   1. [新しいマクロ] を選択します。

   2. 「linkURL」のように、わかりやすい名前を入力します。

   3. [マクロのタイプ] プルダウンから [自動イベント変数] を選択します。

   4. [変数タイプ] プルダウンから [Element URL] を選択します（このオプションは、JavaScript リンクではなく、標準の HREF 形式を使用するリンクの場合のみ機能します）。

3. ユーザーにより選択された商品を取得するマクロを設定します。この例では、サービス名がプルダウン メニューに含まれており、メニューの HTML ID タグが「productName」であるとします。この ID の確認についてサポートを必要とされる場合は、ウェブ デベロッパー チームにお問い合わせください。

   1. [新しいマクロ] を選択します。

   2. 「selectedProduct」のように、わかりやすい名前を入力します。

   3. [マクロのタイプ] プルダウンから [DOM] を選択します。

   4. [要素 ID] フィールドに、フィールドの ID を入力します。この場合、ID は productName です（引用符は不要です）。

   5. [属性名] フィールドに「value」と入力します。value 属性の値は、プルダウンで選択したときに取得されます。

4. イベント リスナー タグを起動するルールを設定します。

   1. [新しいルール] を選択します。

   2. 「downloadLinkClicked」のように、わかりやすい名前を入力します。

   3. [条件] セクションで、最初のプルダウンから [{{event}}] を選択し、次のプルダウンから [equals] を選択し、テキスト ボックスに「gtm.linkClick」と入力します。

   4. プラス記号 (+) をクリックします。

   5. 新しい行の最初のプルダウンから、手順 2 で作成した {{linkURL}} マクロを選択し、2 番目のプルダウンから [等しい] を選択して、テキスト ボックスにダウンロードする PDF の URL（例: http://www.site.com/pdfs/brochure1.pdf）を入力します。

5. コンバージョンを捕捉するように Floodlight タグを設定します（このタグをすでに作成しているか、キャンペーン マネージャー 360 と共有している場合は、ステップ E までスキップします）。

   1. [新しいタグ] を選択します。

   2. 「brochureDownloadTag」のように、わかりやすい名前を入力します。

   3. 必要に応じて適切なタグのタイプ（「Floodlight カウンタ」など）を選択します。

   4. [広告主 ID]、[グループタグ]、[アクティビティ タグ文字列] にそのタグの値を設定し、その他の標準タグの値を必要に応じて設定します。

   5. [カスタム変数] のプルダウンから、u1 または追跡に使用するその他のカスタム変数を選択します。

   6. テキスト ボックスの横にある [マクロボタン] をクリックし、手順 3 で作成した {{selectedProduct}} マクロを選択します。

6. 必要に応じてタグをテストしパブリッシュします。