Accelerated Mobile Pages（AMP）プロジェクトは、ウェブ コンテンツのパフォーマンス向上に役立つオープンソースのウェブ プラットフォームです。AMP には、Google タグ マネージャーの組み込みサポートが含まれています。このドキュメントでは、AMP ページで Google タグ マネージャーを設定するためのおすすめの方法について説明します。
AMP でタグ マネージャーをインストールするには:
AMP コンテナを作成する
タグ マネージャーには、AMP 用のコンテナタイプが用意されています。プロジェクト用の新しい AMP コンテナを作成する手順は、次のとおりです。
- [アカウント] 画面で、使用するアカウントを選んで [その他の操作]（
）をクリックし、[コンテナを作成] を選択します。
- コンテナに名前を付けます。わかりやすい名前を使用してください（例: 「example.com - news - AMP」）。
- [コンテナの使用場所] に [AMP] を選択します。
- [作成] をクリックします。
）をクリックし、[コンテナを作成] を選択します。これでコンテナの準備が整いました。次に、AMP ページにタグ マネージャー コードをインストールします。
タグ マネージャーでは、コード スニペットをインストールする最適な方法についての情報が提供されます。詳細については、次の項目をご参照ください。
タグ マネージャーのスニペットを追加する
新しい AMP コンテナを作成すると、[Google タグ マネージャーをインストール] という画面が表示されます。タグ マネージャーには 2 つのコード スニペットが用意されています。これらのコードを、AMP ページに表示されるようにコピーします。
1 つ目のスニペットは、amp-analytics コンポーネントを AMP ページに追加します。このコードはページの <head> セクションの末尾に配置されます。また、ページ上には 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>
コンテナを設定して公開する
ページにコンテナ スニペットが正しくインストールされると、タグ マネージャーからデプロイされたタグが起動されます。次に、タグ設定を作成してコンテナを公開します。
新しいタグを作成するには:
- [タグ]
[新規] の順にクリックします。
- [タグの設定] をクリックし、サポートされている AMP タグのリストからタグタイプを選択します。
- タグベンダーから提供されている情報でタグを設定します。
- [トリガー] をクリックし、タグを起動させる 1 つ以上のイベント条件を追加します。
- トリガーに名前を付けて、[保存] をクリックします。
[新規] の順にクリックします。追加のタグ設定についても、上記の手順を繰り返します。コンテナの設定が完了したら、コンテナを公開して変更を有効にします。
ページ変数
タグ マネージャーでは、AMP 変数をキャプチャし、タグやトリガー設定に使用することができます。たとえば、靴を販売するページには、個別の靴の特徴を表す変数が含まれている場合があります。これらの値を使用して、タグ マネージャー変数を次のように作成できます。
<script type="application/json ">
{
"vars" : {
"type": "shoes",
"color": "red"
}
}
</script>
</amp-analytics>
上記のコードから色の変数をキャプチャする、タグ マネージャーのユーザー定義変数を作成するには:
- [変数] をクリックします。
- [ユーザー定義の変数] で [新規] をクリックします。
- [変数の設定] をクリックし、[AMP 変数] を選択します。
- [AMP 変数名] のフィールドに、フィールド名を入力します（例: 「color」）。
- 変数にわかりやすい名前を付けます（例: 「AMP 変数 - color」）。
- [保存] をクリックします。