AMP 用のタグ設定

Accelerated Mobile Pages（AMP）プロジェクトは、ウェブコンテンツのパフォーマンス向上に役立つオープンソースのウェブプラットフォームです。AMP には、Google タグと Google タグマネージャーをサポートする機能があらかじめ組み込まれています。このガイドでは、Google アナリティクスを AMP ページ用にセットアップする方法を説明します。

インストール

Google タグを使用すると、Google アナリティクスや Google 広告をはじめとする Google のサービスを AMP ページに導入できます。Google タグマネージャーを使用すると、AMP コンテナがセットアップされ、タグマネージャーの管理画面を通して高度な設定の作成や第三者タグの導入が可能です。

以下のボタンで、使用するプラットフォームを選択してください。

Google タグ

AMP に gtag.js を実装すると、amp-analytics フレームワークを活用して、AMP ウェブサイトのインストルメンテーション分析を行うことができます。この gtag.js の実装により、AMP ページから Google 広告や Google アナリティクスをはじめとする Google のサービスにデータを送信できます。

インストール

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

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

次に、Google タグを JSON コンポーネントとして AMP ページの <body> タグ内に追加します。<TARGET_ID> は、データの送り先サービス（Google 広告、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>

Google タグで複数のサービスの設定を行う場合、各サービスで生成されたタグをまるごと追加する必要はありません。既存のタグに config コマンドを追加し、リンク先 ID を指定するだけで済みます。

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

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

イベントトリガー

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

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

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

推奨イベントに加えて、独自のカスタムイベントを指定することも可能です。

ドメインのリンク

ドメインリンカーを利用すると、別々のドメイン上にある複数の関連サイトをまとめて測定できます。リンクするドメインを指定するには、"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>

サンプルコードの全文

次のサンプルコードは、AMP ページを使ったデモ全体を網羅しています。ボタンをクリックすると AMP ページが 1 つ作成され、Google アナリティクスに button-click イベントが送信されます。<TAG_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": "<TAG_ID>",
            "config": {
              "<TAG_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>

トラブルシューティング

amptagtest.appspot.com を使用してタグ設定を検証するか、以下を行って、cid 値がドメイン間で一致していることを確認します。

Cookie を消去するか、シークレットモードを使用します。
Google アナリティクスの Cookie で cid が見つからなかった場合は、ウェブブラウザの [ネットワーク] タブで監視することもできます。collect request を検索します。ペイロードに cid 値が含まれています。
cid と gclid の値は、Google CDN からクライアントウェブサイトに渡した後、次のように URL デコレーションで渡す必要があります。
```
**_Linker format: mydomain.com?\_gl=1\*1ie2jr6\*\_ga\*WHFTa3JPckw2TGxZSzY5b3V1cVNVSmRIREI.\*gclid\*dGVzdA.._**
```
最初のランディングページと同じ cid 値を、最終的なランディングページにも含める必要があります。
正規ページと AMP 以外のランディングページ間でのリダイレクトとドメイン変更は、慎重に行ってください。

AMP 用のタグ設定

インストール

Google タグ

インストール

イベント トリガー

ドメインのリンク

サンプルコードの全文

トラブルシューティング

イベントトリガー