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>

完全なサンプルコード

1 つの AMP ページを作成して、ボタンがクリックされたときに Google アナリティクスに button-click イベントを送信する、AMP ページの完全なデモを、次のサンプルコードに示します。<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 値が含まれています。
  • cidgclid の値は、Google CDN からクライアント ウェブサイトに渡した後、次のように URL デコレーションで渡す必要があります。

    **_Linker format: mydomain.com?\_gl=1\*1ie2jr6\*\_ga\*WHFTa3JPckw2TGxZSzY5b3V1cVNVSmRIREI.\*gclid\*dGVzdA.._**
    
  • 最初のランディング ページと同じ cid 値を、最終的なランディング ページにも含める必要があります。

  • 正規ページと AMP 以外のランディング ページ間でのリダイレクトとドメイン変更は、慎重に行ってください。