実装

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

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

タグの種類を選択する

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

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

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

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

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

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

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

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

ここでは、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_id と google_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>