AMPでもGoogleタグマネージャーでアフィリエイトタグの計測をしよう！設定から測定まで全部解説！

Googleタグマネージャーを使ったアフィリエイトタグのクリック計測はアフィリエイトサイト、ブログ運営で非常に役に立ちます。

しかしWordPressテーマCocoonのAMP機能や、プラグインを使ったAMP機能では標準ではアンカータグ（aタグ）の値が取得できません。

これを機能追加し、AMPページでもGoogleタグマネージャーでアフィリエイトリンク取得ができるようにしていきます。

GoogleタグマネージャーはAMPクリック計測が行えない

通常のWebサイトではGoogleタグマネージャーでリンクのクリック計測が行なえます。

アフィリエイトサイトだけではなく、企業等のお問い合わせページやCVページ等は普通もれなく数値化しているでしょう。

ところがAMPページではそうはいきません。

Googleタグマネージャーには2019年現在、変数としてClick組み込み変数が用意されていないからです。

そこでWordPressのアンカータグを改変して、AMPページの時のみアンカータグにGoogleタグマネージャーでリンク先のURLを値として格納できるように専用のhref属性を付与して行きます。

Googleタグマネージャー（AMPコンテナ）の準備

まず下準備として、GoogleタグマネージャーでAMPページ用のコンテナを作成しておきます。

コンテナ作成時にコンテナの使用場所を「ウェブ」ではなく「AMP」として作成すればOK。

コンテナの作成は以下の記事を参考にしてください。

作ったAMP用コンテナは通常ページ用と違うコンテナIDが付与されているので、GTM-XXXXXXXというAMP用コンテナのコンテナIDをWordPress側に挿入します。

WordPressテーマ「Cocoon」

わいひら（@MrYhira）さんが作成しているWordPressテーマCocoonの場合、

メニューのCocoon設定　＞　アクセス解析・認証　＞　Googleタグマネージャ設定

より設定が行えます。

上段は通常ページ用、下段がAMPページ用なので入力間違いに注意してください。

function.phpへ測定用コードを設定

続いて、テーマのfunction.phpにAMPページ時に測定用のdata-vars-href属性が付与されるようカスタマイズして行きます。

当カスタマイズでは

• テーマがCocoonである事
• 子テーマCocoon-childを導入済みである事
• CocoonのAMP機能が有効である事

以上を想定して行っております。

一応僕の方で以下の環境でも同様に使用できた事を確認しております。

• WordPressテーマ JIN
  • WordPressプラグイン AMP
  • WordPressプラグイン AMP for WP – Accelerated Mobile Pages

なおfunction.phpのカスタマイズは誤った方法だとページが表示されなくなる等の恐れがあるため、必ずfunction.phpのバックアップを作成した上で実施してください。

if (!function_exists('gtm_data_vars')) {
    function gtm_data_vars($the_content) {
        if ( is_amp() === true) {   //amp判定
            $atag_regex = '/<a .*?(href=[\'|"](.*?)[\'|\"|\ ].*?)>(.*?)<\/a>/';  //アンカータグとhref属性値・リンク文字列取得用の正規表現
            if (preg_match_all($atag_regex, $the_content, $as)) {
                for ($i = 0; $i < count($as[0]); ++$i) {
                    $gtm_tag_str = " data-vars-href=" . $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);

上から下までまるっとコピペしてください。

解説

1. AMPページかどうか判定
2. $the_contentから<a>～</a>やhref属性値等を取得
3. data-vars-href=”href属性値”以降を組み立て
4. aタグの>文字列</a>部分を削除して5.で組み立てたタグの続きを挿入

こんな流れになっています。

CocoonのAMP判定関数is_amp()を使ってAMPページ時のみタグの改変を行っているので、通常ページは今まで通りです。

技術的な事を言うと、DOMでhref値を取得しても良かったんですがDOMが使えない環境を考慮してこんな方法にしてみました。

正規表現とaタグの組み立てについてはもっと簡素な方法はあるんですが、<a href以外に先頭が<a classのようにhref属性以外の場合でも大丈夫なようにしてあります。

それから<address>タグがある場合でもこの方法ならマッチしないので無意味な属性挿入もされません。

実行結果

このコードが実行されるとAMPページのアンカータグは以下のような形になります。

緑色のハイライト部分が今回のカスタマイズで追加された部分です。

このように<aの直後がhref属性ではなくclass属性の場合でもしっかりdata-vars-href属性が付与されていますね。

もちろんtarget属性やrel属性でも問題ありません。

Googleタグマネージャーの設定

それではGoogleタグマネージャー側で設定したhref値を取得して行きます。

ユーザー定義変数の作成

まずはhref値を取得する為のユーザー定義変数を作成します。

AMP用コンテナの左側のメニューから変数をクリックし、ユーザー定義変数の右上にある新規をクリックしてください。

スライドインした画面の左上の変数名と、AMP変数名ボックスにhrefを入力します。

変数タイプは「AMP変数」を選択してください。

設定が終わったら右上の保存ボタンをクリックします。

トリガーの作成

続いてトリガーの作成を行っていきます。

左側のメニューからトリガーをクリックし、開いたページ右上の新規ボタンをクリックします。

スライドインしたページの左上にトリガーの名前（任意）を入力します。

画像ではバリューコマースを例にしています。

トリガータイプはクリックを選択肢、CSSセレクタ欄にa[href*=”valuecommerce.com”]と入力します。

ASP名	値
Amazonアソシエイト	a[href*=”amazon.co.jp”], a[href*=”amzn.to”]
楽天アフィリエイト	a[href*=”rakuten.co.jp”], a[href*=”a.r10.to”]
A8.net	a[href*=”a8.net”]
afb	a[href*=”affiliate-b.com”], a[href*=”afi-b.com”]
バリューコマース	a[href*=”valuecommerce.com”]
アクセストレード	a[href*=”accesstrade.net”]
もしもアフィリエイト	a[href*=”moshimo.com”]
TGアフィリエイト	a[href*=”trafficgate.net”]
TCSアフィリエイト	a[href*=”tcs-asp.net”]
JANet	a[href*=”j-a-net.jp”]
Link-A	a[href*=”link-a.net”]
ADVack	a[href*=”advack.net”]
Smart-C	a[href*=”smart-c.jp”]

各ASPのCSSセレクタ値一覧です。

この機会に是非未登録のASPも登録して、Googleタグマネージャーも一緒に設定しておきましょう！

トリガーの発生場所はすべてのページのままでOKです、入力が完了したら保存をクリックしてトリガー作成は完了です。

タグの作成

いよいよ最後の作業、タグの作成です。

左側のメニューからタグをクリックし、開いたページの右上の新規ボタンをクリックします。

まず左上にタグ名を入力（任意）、続いてタグの設定を行います。

トラッキングID	GoogleアナリティクスのトラッキングID
トラッキングタイプ	イベント
カテゴリ	ASP名等の分かりやすい名前
アクション	{{href}}
ラベル	{{href}}:{{Page URL}}

上から順に入力していきます。

カテゴリ名はGoogleアナリティクスで表示される名称になるのでASP名等の分かりやすい物がいいです。

これ以外の項目は空欄・デフォルトのままでOK。

トラッキングIDはウェブ用コンテナだとGoogleアナリティクスIDをユーザー定義変数で作成できるのですが、AMP版はそれがない為ちょっとめんどうですが1個1個手入力です・・・笑。

トリガーは対応した物を選択し、最後に右上の保存をクリックしてタグ作成終了です。

公開

後は作成したタグを公開するだけでOK！

ワークスペース右上の公開ボタンを押して公開したら全ての作業終了です！

解説

今回の作業で実際にアフィリエイトリンクがクリックされた時Googleアナリティクスに表示されるイベント名は僕が以前解説した通常ページの名称と同じです（どちらも同じイベント名で表示される）。

AMP用を区別したければタグのカテゴリ名に例えば「バリューコマース – AMP」のように名称をつけても良いですが、Googleアナリティクスはどのページからリンクがクリックされたかの識別も行えます（行動＞イベント＞ページ）。

明確にAMPページを区別したい場合カテゴリ名に任意のAMPページである事を記述しても良いですが、基本的にはページ別に見て判別する方法で良いかと思います。

GoogleタグマネージャーでAMPのリンクも取得しよう！

Googleタグマネージャーを使ってAMPのリンクを取得するには一手間必要ですが、これで通常ページだけではなくAMPページでもアフィリエイトリンクのクリック計測が行えるようになりました！

AMPはGoogleが推奨している事もあり、今後ますます機能拡張等で導入が進んで来ると個人的には思っています。

もし既にAMPを導入している場合はすぐに計測を開始して、早い段階からデータを集めておきましょう！