ウェブサイトのアクセス解析に Googleアナリティクス を使っていますが、単体では外部サイトへのクリック数を計測できません。
通常ページのクリックは、Googleタグマネージャーを使って計測できましたが、AMPページ用のコンテナにはクリックURLの 組み込み変数がなく、頓挫していました。
通常ページだけでも、傾向を掴むことはできるのですが、やはり外部リンクへのクリックの実数を確認しておきたいと思い、改めて挑戦しました。
WordPressのfunctions.phpでHTML要素に属性を追加したり、Googleタグマネージャーでユーザー定義変数を作成したりして、ようやくAMPページでも外部サイトへのクリックURLをGoogleアナリティクスに記録できるようになりました。一連の設定を まとめておきます。

Googleタグマネージャの使い方について検索しても、なかなかAMPに対応した情報を見つけるのが大変でした。
1. 作業の主な流れ
基本的な流れは前回とほぼ一緒ですが、AMPコンテナでは「ユーザー定義変数」の設定に関わる部分が異なります。

「ウェブページにコンテナを追加する」までは、過去の記事と同様なので割愛します。
2. ページ内の要素にdata-vars-〜属性を追加する
AMPでクリックURLを記録するには、「ユーザー定義変数」を利用します。
Googleタグマネージャでは、「data-vars-〜」の属性を、「ユーザー定義変数 〜」として読み込むことができます。

まずは、下準備としてWordPressの「functions.php」にフィルター関数を追加します。
意味としては、AMPページの本文の<a>タグを順番に見て、”data-vars-clickurl” 属性にhrefの内容をセットして、置換しています。

// リンクのクリック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 にします。

4. トリガーの設定(外部リンクのCSSセレクタ)
次は、トリガー設定します。
リンクをクリックしたときに記録します。

CSSセレクタの書き方を理解するのに、少し時間がかかりました。
すべてのリンクを記録するなら「a」で十分なのですが、外部リンクを記録するために 内部リンクと目次のリンクを除外しています。
a:not([href*="chiilabo"]):not([href*="#toc"])
「:not()」は、否定擬似クラス
「[ ]」は、属性セレクタ
というCSSの記法を利用しています。
[href*=”chiilabo”]は、「href属性が”chiilabo”と先頭一致する(*=)」という意味になり、内部リンクを表しています。その否定なので、内部リンクではないことになります。
5. タグを設定する
変数とトリガーができたら、最後はそれらを結びつける「タグ」を設定します。

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

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

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

![「:not()」で複数のclassを指定するには 〜 擬似クラス[CSS]](https://chiilabo.com/wp-content/uploads/2020/09/ScreenShot-2020-09-17-12.42.27-1-160x99.png)
