実装

AdWords リマーケティング タグを実装するための基本的な手順は次のとおりです。

  1. 使用するタグの種類を選択します。
  2. 収集するパラメータを選択します。
  3. お客様のウェブサイトで、該当するすべてのページにコード スニペットを挿入します。
  4. タグが正しく実行されることを確認します。

タグの種類を選択する

AdWords リマーケティング タグには標準タグ非同期タグがあります。

ほとんどのウェブサイトでは、ページの読み込み時に自動的に実行される標準タグを使用します。ただし、通常のコンバージョン経路の一部として高度な AJAX 技術を使用している場合(単一ページのウェブサイトや、ショッピング カートにアイテムを動的に追加するページなど)、またはその他の方法によってページの読み込み回数やナビゲーション数を減らしている場合は、非同期タグが適しています。非同期タグを使用すると、javascript でタグを実行するタイミングを制御できますが、実装がやや複雑になります。

収集するパラメータの種類を選択する

使用するタグを選択したら、各ページで収集するパラメータを決定する必要があります。どのパラメータを収集するかはビジネスニーズによって異なりますが、小売、教育、ホテル、航空券の各分野には推奨パラメータが用意されています。詳細についてはパラメータ リファレンスをご覧ください。

技術的には、リマーケティング タグは、シンプルな javascript オブジェクトとしてパラメータ値を収集します。このオブジェクトには、タイプが文字列、数値、ブール値、または配列の名前付きプロパティが格納されます。実際にどのようなパラメータを収集するかはビジネスによって異なります。お客様のウェブサイトに役立つパラメータについては、Google のアカウント担当者にご相談ください。

コード スニペットをウェブサイトに追加する

どのパラメータをどこで収集するかを決定したら、次は、サイトにタグを追加しましょう。ここでは次の作業を行います。

  1. パラメータを収集するスニペットを追加する
  2. メインのリマーケティング タグ スニペットを追加する
ここでは、AdWords リマーケティング タグをウェブサイトに追加する一般的な方法をご紹介します。ただし、実際のウェブサイトはそれぞれ異なります。以下の例はあくまで参考としてご利用いただき、お客様のウェブサイトに適した方法でタグを実装してください。

パラメータを収集するスニペットを追加する

パラメータを収集するスニペットは、有益なリマーケティング情報を渡せるように変更する必要があります。必ず、メインのリマーケティング タグ スニペットの前に、これらのスニペットを追加してください。この順序で追加しないと、ペイロードが空の状態で実行される可能性があります。

シンプルな HTML と Javascript

PHP

シンプルな PHP echo ステートメントを使用して、パラメータ値を動的に取得できます。

たとえば、サイトの各商品ページをデータベースから作成しており、AdWords リマーケティング タグに ecomm_prodid パラメータ値を設定する必要があるとします。この場合、PHP を使用してページを動的に生成するには、商品の ID を PHP 変数 $prodIdValue に格納した後、PHP の echo 関数を使用して、その変数をタグの google_tag_params セクションに追加します。

<script type="text/javascript">
var google_tag_params = {
  ecomm_prodid: '<?php echo $prodIdValue ?>'
};
</script>

JSP

シンプルな JSP スクリプト ステートメントを使用して、パラメータの値を動的に取得できます。

たとえば、サイトの各商品ページをデータベースから生成しており、AdWords リマーケティング タグに ecomm_prodid パラメータ値を設定する必要があるとします。この場合、サーブレットを使用してページを動的に生成するには、商品の ID をリクエストの prodIdValue 属性に格納した後、スクリプトレットを使用して、その変数をタグの google_tag_params セクションに追加します。

<script type="text/javascript">
var google_tag_params = {
  ecomm_prodid: '<% request.getAttribute("prodIdValue") %>'
};
</script>
また、JSTL を使用している場合は、JSTL Core の c:out タグを使用できます。
<script type="text/javascript">
var google_tag_params = {
  ecomm_prodid: '<% c:out value="${prodIdValue}" %>'
};
</script>
次に、サーブレットのページ用ソースファイルで、ページが読み込まれた時点でこの値をデータベースから取得し、動的に設定できます。
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  // ... The rest of your doGet code ...
  request.setAttribute("prodIdValue", prodIdValue); // prodIdValue should have a value from your database by this point
}

ASP.NET

シンプルな ASP.NET Response.Write ステートメントを使用して、パラメータの値を動的に取得できます。

たとえば、ウェブサイトの各商品ページをデータベースから生成しており、AdWords リマーケティング タグに ecomm_prodid パラメータ値を設定する必要があるとします。この場合、ASP.NET を使用してページを動的に生成するには、商品の ID を ASP.NET 変数 ProdIdValue に格納した後、ASP.NET の Response.Write 関数を使用して、その変数をタグの google_tag_params セクションに追加します。

<script type="text/javascript">
var google_tag_params = {
  ecomm_prodid: '<% Response.Write(ProdIdValue) %>'
};
</script>
また、ウェブサイトでコード ビハインドが必要な場合、ASP.NET LiteralControl サーバー コントロールを使用すれば、AdWords リマーケティング タグを動的に設定できます(LabelControl の使用はおすすめしません。このサーバー コントロールはページの生成時に HTML タグを追加するため、javascript エラーとなります)。たとえば、次のスクリプトを ASPX ファイルに追加します。
<script type="text/javascript">
var google_tag_params = {
  ecomm_prodid: '<asp:Literal runat="server" id="ProdIdValueLiteral" />'
};
</script>
該当するページのコード ビハインド ソースファイルでは、ページが読み込まれた時点でデータベースから値を取得し、その値を動的に設定できます。PassThrough プロパティを使用することで、ASP.NET 実行時にブラウザベースの変更、変換、エンコーディングが行われず、値がそのままの状態で渡されます。
protected void Page_Load(object sender, EventArgs e)
{
  // ... The rest of your Page_Load code ...
  ProdIdValueLiteral.PassThrough;
  ProdIdValueLiteral.Text = ProdIdValue;  // ProdIdValue should have a value from your database by this point
}

メインのリマーケティング タグ スニペットは、ページごとに動的に変更する必要がありません(たとえば、google_conversion_id はどのページでも同じです)。したがって、プログラムで更新する必要もありません。

メインのリマーケティング タグ スニペットを追加する

ブラウザが googleadservices.com サーバーから conversion.js ファイルをダウンロードして処理している間、ページの読み込みが待たされるのを避けるため、メインのリマーケティング タグ スニペットは body 終了タグの直前に挿入してください。

メインのリマーケティング タグ スニペットをページに追加する際、google_conversion_idgoogle_conversion_label を設定する場合は、これらにお客様の実際の値を指定する必要があります。AdWords 管理画面で事前に確認しておくか、Google のアカウント担当者に直接お問い合わせください。たとえば、google_conversion_id が 123456789、google_conversion_label が abcDeFghIjKlmnoP1rs の場合、タグ スニペットは次のようになります。

<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = 123456789;
var google_conversion_label = "abcDeFghIjKlmnoP1rs";
var google_custom_params = window.google_tag_params;
var google_remarketing_only = true;
/* ]]> */
</script>
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js"></script>
<noscript>
  <div style="display:inline;">
    <img height="1" width="1" style="border-style:none;" alt=""
    src="//googleads.g.doubleclick.net/pagead/viewthroughconversion/123456789/?value=0&label=abcDeFghIjKlmnoP1rs&guid=ON&script=0"/>
  </div>
</noscript>
標準リマーケティング タグ スニペットの内容と機能について詳しくは、標準タグのページをご覧ください。

最終的に、次のような HTML ページ構造になります。

<!doctype html>
<html>
  <head>
    <!-- ... Your website's head section can remain unchanged ... -->
  </head>
  <body>
    <!-- The snippet to collect parameters should be somewhere above the main remarketing tag snippet -->
    <script type="text/javascript">
      var google_tag_params = {
        parameter1: 'abc123',
        parameter2: 29.99
      };
    </script>

    <!-- ... The rest of your website's HTML would be here ... -->

    <!-- The main remarketing tag snippet should be just before the final body tag -->
    <script type="text/javascript">
      /* <![CDATA[ */
      var google_conversion_id = 123456789;
      var google_conversion_label = "abcDeFghIjKlmnoP1rs";
      var google_custom_params = window.google_tag_params;
      var google_remarketing_only = true;
      /* ]]> */
    </script>
    <script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js"></script>
    <noscript>
      <div style="display:inline;">
        <img height="1" width="1" style="border-style:none;" alt=""
          src="//googleads.g.doubleclick.net/pagead/viewthroughconversion/123456789/?value=0&label=abcDeFghIjKlmnoP1rs&guid=ON&script=0"/>
      </div>
    </noscript>
  </body>
</html>