スポンサーリンク
スポンサーリンク

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

インターネット小話プログラミングホームページ運用

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

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

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

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

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

スポンサーリンク

作業の主な流れ

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

クリックURLを計測するまでの大まかな流れ(AMP)
  • 初期設定
    • (Google タグ マネージャの利用登録をする)
    • (アカウントを追加する)
    • (コンテナを追加する)
    • (ウェブサイトにコンテナのコードを追加する)
  • (NEW)ページの要素にdata-vars-〜属性を追加する
  • (NEW)ユーザー定義変数を追加する
  • トリガーを追加する
  • タグを追加する
タグとトリガー・組込み変数の関係
Google AnalyticsでページのクリックURLを記録する 【Google タグマネージャーの組込み変数】 – スマホ教室ちいラボ

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

ページ内の要素に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以外にも、いろいろなデータを取得できます。

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

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

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

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

ユーザー定義変数の設定
  • 変数名:任意
    (例:「クリックURL(ユーザー定義)」)
  • 変数のタイプ:AMP変数
    • AMP変数名:clickurl
      (data-vars-clickurlに対応)

トリガーの設定(外部リンクのCSSセレクタ)

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

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

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

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

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

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

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

タグを設定する

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

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

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

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

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

QRコードを読み込むと、関連記事を確認できます。
【再挑戦】AMPページでクリックURLを記録する【Google タグマネージャーのユーザー定義変数・CSSセレクタ】
タイトルとURLをコピーしました