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>