AMP とタグ マネージャーの設定ガイド

Accelerated Mobile Pages(AMP)プロジェクトは、ウェブ コンテンツのパフォーマンス向上に役立つオープンソースのウェブ プラットフォームです。AMP には、Google タグ マネージャーの組み込みサポートが含まれています。このドキュメントでは、AMP ページで Google タグ マネージャーを設定するためのおすすめの方法について説明します。

AMP でタグ マネージャーをインストールするには:

  1. タグ マネージャーで AMP コンテナを作成します。
  2. タグ マネージャーのスニペットを AMP ページに追加します。
  3. タグ マネージャーのコンテナにタグを設定して公開します。

AMP コンテナを作成する

タグ マネージャーには、AMP 用のコンテナタイプが用意されています。プロジェクト用の新しい AMP コンテナを作成する手順は、次のとおりです。

  1. [アカウント] 画面で、使用するアカウントを選んで [その他の操作](その他)をクリックし、[コンテナを作成] を選択します。
  2. コンテナに名前を付けます。わかりやすい名前を使用してください(例: 「example.com - news - AMP」)。
  3. [コンテナの使用場所] に [AMP] を選択します。
  4. [作成] をクリックします。

これでコンテナの準備が整いました。次に、AMP ページにタグ マネージャー コードをインストールします。

タグ マネージャーでは、コード スニペットをインストールする最適な方法についての情報が提供されます。詳細については、次の項目をご参照ください。

タグ マネージャーのスニペットを追加する

新しい AMP コンテナを作成すると、[Google タグ マネージャーをインストール] という画面が表示されます。タグ マネージャーには 2 つのコード スニペットが用意されています。これらのコードを、AMP ページに表示されるようにコピーします。

注: コード スニペットを後から入手するには、ワークスペースの概要ページ上部にあるコンテナ ID 番号をクリックするか、[管理] > [Google タグ マネージャーをインストール] の順にクリックします。

1 つ目のスニペットは、amp-analytics コンポーネントを AMP ページに追加します。このコードはページの <head> セクションの末尾に配置されます。また、ページ上には 1 回しか表示されないようにする必要があります。

<!-- AMP Analytics --><script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
重要: このコードは、ページにまだ含まれない場合にのみ追加し、ページごとに 1 回のみ表示されるようにしてください。

2 つ目のスニペットでは、タグ マネージャーを使用するように amp-analytics を設定します。このコードを開始エレメント <body> の直後に配置します。GTM-CONTAINER_ID をタグ マネージャーのコンテナ ID に置き換えるか、タグ マネージャーのユーザー インターフェースからスニペット全体をコピーして貼り付けます。

<!-- Google Tag Manager -->
<amp-analytics config="https://www.googletagmanager.com/amp.json?id=GTM-CONTAINER_ID" data-credentials="include"></amp-analytics>

コンテナを設定して公開する

ページにコンテナ スニペットが正しくインストールされると、タグ マネージャーからデプロイされたタグが起動されます。次に、タグ設定を作成してコンテナを公開します。

新しいタグを作成するには:

  1. [タグ] 右矢印 [新規] の順にクリックします。
  2. [タグの設定] をクリックし、サポートされている AMP タグのリストからタグタイプを選択します。
  3. タグベンダーから提供されている情報でタグを設定します。
  4. [トリガー] をクリックし、タグを起動させる 1 つ以上のイベント条件を追加します。
  5. トリガーに名前を付けて、[保存] をクリックします。

追加のタグ設定についても、上記の手順を繰り返します。コンテナの設定が完了したら、コンテナを公開して変更を有効にします。

ページ変数

タグ マネージャーでは、AMP 変数をキャプチャし、タグやトリガー設定に使用することができます。たとえば、靴を販売するページには、個別の靴の特徴を表す変数が含まれている場合があります。これらの値を使用して、タグ マネージャー変数を次のように作成できます。

<amp-analytics config="https://www.googletagmanager.com/amp.json?id=Tag Manager-XXXXXX;Tag Manager.url=SOURCE_URL" data-credentials="include">
  <script type="application/json ">
      {
          "vars" : {
              "type": "shoes",
              "color": "red"
          }
      }
  </script>
</amp-analytics>

上記のコードから色の変数をキャプチャする、タグ マネージャーのユーザー定義変数を作成するには:

  1. [変数] をクリックします。
  2. [ユーザー定義の変数] で [新規] をクリックします。
  3. [変数の設定] をクリックし、[AMP 変数] を選択します。
  4. [AMP 変数名] のフィールドに、フィールド名を入力します(例: 「color」)。
  5. 変数にわかりやすい名前を付けます(例: 「AMP 変数 - color」)。
  6. [保存] をクリックします。

タグ マネージャーでサポートされている AMP タグ

この情報は役に立ちましたか?
改善できる点がありましたらお聞かせください。