AMP のグローバルサイトタグ

gtag.js の AMP 実装では、amp-analytics フレームワークを活用して、AMP ウェブサイトに分析機能を提供します。同じ gtag.js 実装で、AMP ページから Google 広告、DoubleClick、Google アナリティクスにデータを送ることができます。

インストール

AMP ページで gtag.js を設定するには、まずは amp-analytics コンポーネントがページの <head> タグ内に含まれているようにします。

<script async custom-element="amp-analytics"
src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js">
</script>

次に、グローバルサイトタグをインストールします。グローバルサイトタグコードを JSON コンポーネントとして AMP ページの <body> タグ内に追加します。<TARGET_ID> を、関連する Google 広告コンバージョン ID、DoubleClick 広告主 ID、Google アナリティクス ID に置き換えます。

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<TARGET_ID>",
    "config" : {
      "<TARGET_ID>": { "groups": "default" }
    }
  }
}
</script>
</amp-analytics>

グローバルサイトタグに追加のサービスを設定するために、そのサービスからコードスニペット全体をインストールする必要はありません。ターゲット ID を config オブジェクトに追加するだけです。この例では、既存の Google アナリティクス設定に Google 広告コンバージョン ID が追加されています。ご利用のサービスの値で <AW-CONVERSION_ID> と <GA_MEASUREMENT_ID> を置き換えてください。

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": { "groups": "default" },
      "<AW-CONVERSION_ID>": { "groups": "default" }
    }
  }
}
</script>
</amp-analytics>

詳しくは、amp-analytics のドキュメントをご覧ください。

イベントトリガー

特定のデータをサービスに送信するには、クリックなどのイベントに基づいてトリガーを設定します。AMP の gtag.js トリガーは、他の amp-analytics トリガー設定と同じ JSON パターンに従います。

この例では、Google アナリティクスにクリックイベントを送信する方法を示します。selector 値は CSS セレクタの一種で、どのエレメントをターゲットにするかを指定できます。on 値はイベントのタイプを指定します。この場合は click イベントです。vars セクションで event_name にイベントのタイプを指定し、必要に応じて別のパラメータを追加します。

"triggers": {
  "button": {
    "selector": "#the-button",
    "on": "click",
    "vars": {
      "event_name": "login",
      "method": "Google"
    }
  }
}

gtag.js のイベントの推奨リストに加えて、独自のカスタムイベントを指定することもできます。

ドメインをリンクする

ドメインリンカーを利用すると、別々のドメイン上にある複数の関連サイトを 1 つにまとめて測定できます。リンクするドメインを指定するには "linker": { "domains": [...] } を指定します。

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<TARGET_ID>",
    "config" : {
      "<TARGET_ID>": {
        "groups": "default",
        "linker": { "domains": ["example.com", "example2.com", "foo.example.com"] }
      }
    }
  }
}
</script>
</amp-analytics>

デフォルトで、AMP キャッシュから正規ドメインにリンクする機能が有効になっています。ドメイントラフィックをリンクする機能を無効にするには、config パラメータに "linker": "false" を追加します。

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<TARGET_ID>",
    "config" : {
      "<TARGET_ID>": {
        "groups": "default",
        "linker": "false"
      }
    }
  }
}
</script>
</amp-analytics>

サンプルコードの全文

このサンプルコードは、1 つの AMP ページを作成し、ボタンがクリックされたときに Google アナリティクスに「button-click」イベントを送信する AMP ページの完全なデモを示しています。<GA_MEASUREMENT_ID> を必ず有効なサービスの ID に置き換えてください。

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="canonical" href="self.html" />
    <title>AMP gtag demo</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

    <!-- Load AMP -->
    <script async src="https://cdn.ampproject.org/v0.js"></script>

    <!-- Load amp-analytics -->
    <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
  </head>
  <body>
    <!-- Configure analytics to use gtag -->
    <amp-analytics type="gtag" data-credentials="include">
      <script type="application/json">
        {
          "vars": {
            "gtag_id": "<GA_MEASUREMENT_ID>",
            "config": {
              "<GA_MEASUREMENT_ID>": {}
            }
          },
          "triggers": {
            "button": {
              "selector": "#the-button",
              "on": "click",
              "vars": {
                "event_name": "login",
                "method": "Google"
              }
            }
          }
        }
      </script>
    </amp-analytics>

    <h1>Welcome to the mobile web</h1>
    <div>
      <button type="button" id="the-button">Example: Log in with Google</button>
    </div>
  </body>
</html>