【再挑戦】AMPページでクリックURLを記録する【Google タグマネージャーのユーザー定義変数・CSSセレクタ】

ウェブサイトのアクセス解析に Googleアナリティクス を使っていますが、単体では外部サイトへのクリック数を計測できません。

通常ページのクリックは、Googleタグマネージャーを使って計測できましたが、AMPページ用のコンテナにはクリックURLの組み込み変数がなく、頓挫していました。

前回はこちら。約１年前ですね。

Google AnalyticsでページのクリックURLを記録する【Google タグマネージャーの組込み変数】

ウェブサイトのアクセス解析にGoogleアナリティクスを使っていますが、外部サイトのクリック数がありません。Googleタグマネージャーで通常ページのアクセスは計測できたものの、AMPページでうまくいきませんでした。GoogleタグマネージャーのAMPコンテナについて、レポートします。AMPページのクリックURLについてJavaScriptコードを追加して再挑戦しました。クリックURLを計測したいならタグマネージャ外部サイトのクリック数を計測したいと思いました。紹介したどのペ...

通常ページだけでも、傾向を掴むことはできるのですが、やはり外部リンクへのクリックの実数を確認しておきたいと思い、改めて挑戦しました。

WordPressのfunctions.phpでHTML要素に属性を追加したり、Googleタグマネージャーでユーザー定義変数を作成したりして、ようやくAMPページでも外部サイトへのクリックURLをGoogleアナリティクスに記録できるようになりました。一連の設定をまとめておきます。

【再挑戦】AMPページでクリックURLを記録する【Google タグマネージャーのユーザー定義変数・CSSセレクタ】

Googleタグマネージャの使い方について検索しても、なかなかAMPに対応した情報を見つけるのが大変でした。

1. 作業の主な流れ

基本的な流れは前回とほぼ一緒ですが、AMPコンテナでは「ユーザー定義変数」の設定に関わる部分が異なります。

クリックURLを計測するまでの大まかな流れ（AMP）

初期設定
- （Google タグマネージャの利用登録をする）
- （アカウントを追加する）
- （コンテナを追加する）
- （ウェブサイトにコンテナのコードを追加する）
（NEW）ページの要素にdata-vars-〜属性を追加する
（NEW）ユーザー定義変数を追加する
トリガーを追加する
タグを追加する

タグとトリガー・組込み変数の関係 — Google AnalyticsでページのクリックURLを記録する【Google タグマネージャーの組込み変数】 – スマホ教室ちいラボ

「ウェブページにコンテナを追加する」までは、過去の記事と同様なので割愛します。

Google AnalyticsでページのクリックURLを記録する【Google タグマネージャーの組込み変数】

目次に戻る

2. ページ内の要素にdata-vars-〜属性を追加する

AMPでクリックURLを記録するには、「ユーザー定義変数」を利用します。

Googleタグマネージャでは、「data-vars-〜」の属性を、「ユーザー定義変数〜」として読み込むことができます。

まずは、下準備としてWordPressの「functions.php」にフィルター関数を追加します。

意味としては、AMPページの本文の<a>タグを順番に見て、”data-vars-clickurl” 属性にhrefの内容をセットして、置換しています。

function.phpの追加コード

// リンクのクリックURLをGoogle Tag Managerに伝えるためにdata-vars-clickurl属性を追加
// 
if (!function_exists('gtm_data_vars')) {
    function gtm_data_vars($the_content) {
        if ( is_amp() === true) {
			//アンカータグとhref属性値・リンク文字列取得用の正規表現
            $atag_regex = '/<a .*?(href=[\'|"](.*?)[\'|\"|\ ].*?)>(.*?)<\/a>/'; 
            if (preg_match_all($atag_regex, $the_content, $as)) {
                for ($i = 0; $i < count($as[0]); ++$i) {
					$href = $as[2][$i];
						$gtm_tag_str = " data-vars-clickurl=" . $as[2][$i] . ">" . $as[3][$i] . "</a>";
						$the_content = str_replace($as[0][$i], substr($as[0][$i], 0, strcspn($as[0][$i], '>')) . $gtm_tag_str, $the_content);   
                }
            }
            return $the_content;
        } else {
            return $the_content;
        }
    }
}
        
if (!function_exists('wp_loaded_add_gtm_data_vars')) {
    function wp_loaded_add_gtm_data_vars() {
        ob_start('gtm_data_vars');
    }
}

add_action('wp_loaded', 'wp_loaded_add_gtm_data_vars', 1);

このphpコードは、AMPでもGoogleタグマネージャーでアフィリエイトタグの計測をしよう！設定から測定まで全部解説！ | L’7 Recordsを参考にしています。

ポイントは、”data-vars-clickurl” の箇所で、太字部分は好きな名前にできます（引用元では”data-vars-href”という属性名です）。

属性値も好きな文字列にできるので、クリックURL以外にも、いろいろなデータを取得できます。

目次に戻る

3. ユーザー定義変数を追加する

ここからは、Googleタグマネージャの操作です。

タグマネージャの「ワークスペース」ー「変数」で、新しいユーザー定義変数を追加します。

AMP変数の名前を clickurl にします。

ユーザー定義変数の設定

変数名：任意
（例：「クリックURL（ユーザー定義）」）
変数のタイプ：AMP変数
- AMP変数名：clickurl
  （data-vars-clickurlに対応）

目次に戻る

4. トリガーの設定（外部リンクのCSSセレクタ）

次は、トリガー設定します。

リンクをクリックしたときに記録します。

CSSセレクタの書き方を理解するのに、少し時間がかかりました。

すべてのリンクを記録するなら「a」で十分なのですが、外部リンクを記録するために内部リンクと目次のリンクを除外しています。

a:not([href*="chiilabo"]):not([href*="#toc"])

「:not()」は、否定擬似クラス
「[ ]」は、属性セレクタ
というCSSの記法を利用しています。

[href*=”chiilabo”]は、「href属性が”chiilabo”と先頭一致する（*=）」という意味になり、内部リンクを表しています。その否定なので、内部リンクではないことになります。

目次に戻る

5. タグを設定する

変数とトリガーができたら、最後はそれらを結びつける「タグ」を設定します。

以上ができあがったら、「公開」します。

このようにすると、ウェブサイトに設置した「コンテナ」は「タグ」の内容を参照して、アクセス記録を取り始めます。Google Analyticsを見てみると、ちゃんと計測できています。

通常ページと分けたい場合には、タグの「イベントラベル」を「amp:{{クリックURL（ユーザー定義）}}」など変更すれば、イベントラベルで区別できます。

最初の動作確認では、ampをイベントラベルの先頭につけて、正常に記録できていることを確認しました。

こちらもどうぞ

Google AnalyticsでページのクリックURLを記録する【Google タグマネージャーの組込み変数】

「:not()」で複数のclassを指定するには〜擬似クラス[CSS]

プログラミングには論理演算というのがあって、条件を組み合わせることがよくあります。条件を組み合わせたい（論理積）ことは多い例えば、擬似コードですが、if(day ≠ "日" ∧ day ≠ "土") return 営業else return 休日このような２つの条件、Aでもなく、Bでもない、という書き方をすることがあります。CSSではどうすればよいのでしょうか？否定擬似クラス:notを組み合わせる否定擬似クラス:notがありますが、複数組み合わせる場合は実はつなげて書きます。...

CSSのクラス指定の空白の意味知っていますか？子孫結合子と除外の方法

CSSのクラス指定が複雑になったときの意味を調べてみました。散々、迷って出来上がったCSSのコードは以下です。.article :not(div.toc-content) li { font-size: 115%; font-weight: 600;}意図としては、「記事（.articleクラス）の中のリスト項目のフォントサイズを大きくする、ただし、目次（toc-contentクラス）のリスト項目のフォントサイズは大きくしない」です。これは3つの要素が組み合わせてあります。....

（参考）

目次に戻る

QRコードを読み込むと、関連記事を確認できます。