last update 2020年2月26日 22:14

【AMP×GTM×GA】GAのカスタムディメンションの値にAMP変数を使う方法

AMP 版 Google Tag Manager(以下、GTM)で、非 AMP 版 GTM の dataLayer(データレイヤー)みたいな事ができる「AMP変数」の使い方です。自分用メモも兼ねて。

例として、Google Analytics(以下、GA)へのページビュー送信時、GA のカスタムディメンションの値として、GTM の AMP 変数の値を利用する方法を紹介しておきます。

なんか、一か所だけなんですが、無駄なハマりどころがあったもので…。

こんな記事を読む人は、多分、ある程度分かっている人だと思うので、GA のカスタムディメンジョンはすでに設定済み、という前提とさせてもらいます。

AMP-HTMLからAMP変数へ値を入れる

まず、AMP-HTML 側に設置するコードのベースを、GTM の「管理」→「Googleタグマネージャーをインストール」から取得しておきます。

コードは <head> タグ用と <body> タグ用とに分かれていますが、<body> タグ用コードの <amp-analytics> タグ内に、json 形式で AMP変数への代入を記述できます。

<amp-analytics config="https://www.googletagmanager.com/amp.json?id=GTM-XXXXXXX&gtm.url=SOURCE_URL" data-credentials="include"> <script type="application/json"> { "vars" : { "Author": "Somebody", "Theme": "AMP" } } </script> </amp-analytics>

この例では、AMP変数「Author」に「Somebody」という値と、AMP変数「Theme」に「 AMP」という値を設定しています。

こいつのハマりどころは、公式ヘルプのサンプルコード

<script type="application/json ">

こんな書き方になっていまして(2020年2月26日現在)、よく見ると type 属性の最後に空白が入ってるんですよね。Google さん勘弁して…。

Google Tag Manager側にAMP変数を用意

この記事をお読みの方なら GTM にはすでに明るいと思われますので、ざっとスクショベースで説明しておきます。(※画像はピンチアウトで拡大可)

GTM 側での「AMP変数」の作成は以下のとおり。

ポイントは2点。変数のタイプに「AMP変数」を選択すること、あと「AMP変数名」が AMP-HTML 側の json で書いた変数名と一致していること。

作成したAMP変数は、GTM のタグから以下のように利用可能です。

ここでのポイントは、予め用意しておいた GA 側のカスタムディメンションの「インデックス」を間違えないことと、「ディメンションの値」に正しいAMP変数の参照を入れること。

GTM では変数の項目名を変更した場合、自動で参照先までは変更してくれなかった気がするので注意。

上の図では自前のトリガーを指定していますが、全ページが対象ならデフォルトで用意されている「All Pages」というトリガーを指定しても動作します。

また、この例ではトラッキングID用の定数を別途定義していますが、単純な仕組みなら直接値を書いても良いでしょう。

これで、GA 側で正しくカスタムディメンションさえ設定されていれば、AMP-HTML 側で設定したAMP変数の値が、GA のカスタムディメンションの値として送信されるはずです。

うまく動かないときは

なお、GTM 側で定義した AMP 変数は、AMP ページ閲覧時、https://www.googletagmanager.com/amp.json から自動取得される json 上で確認可能です。

"requests": {"4": "https://www.google-analytics.com/r/collect?v=1&_v=a1& ... &cd1=${Author}&cd2=${Theme}",

Chrome のディベロッパーツール →「Network」から見られるので、うまく動かない場合は覗いてみると良いでしよう。

また、AMP-HTML 側のエラーがあっても動作しない場合があったので、「Console」も確認すると良いと思います。

コメントを記入