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

GoogleタグマネージャAMPアフィリエイトタグ解析記事用アイキャッチ

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

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

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

  • AMPページでアフィリエイトリンクを取得する方法がわかる
  • コピペでOK!function.phpへの機能追加ができる
  • Googleタグマネージャーの設定方法がわかる

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

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

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

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

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

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

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

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

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

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

ブログ運営データはGoogleタグマネージャを導入して測定しよう!設置からGoogleアナリティクス連携まで徹底解説!
これを読まれている多くのサイト運営者さんはGoogleアナリティクスを導入して日々のPV数や直帰率等のデータを確認していると思います。 データは長く運営すればする程取れるので1日でも早く解析を始めるべきですが、Googleアナリティク...

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

WordPressテーマ「Cocoon」

Googleタグマネージャ - Cocoon

Cocoonの場合は専用ページからコンテナIDの入力だけでOKです

わいひら(@MrYhira)さんが作成しているWordpressテーマCocoonの場合、

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

より設定が行えます。

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

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

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

当カスタマイズでは

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

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

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

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

if (!function_exists('gtm_data_vars')):
    function gtm_data_vars($the_content) {
        if ( is_amp() === true) {   //amp判定
            $atag_regex = '/<a( .+?)?\shref=[\'|"](.*?)[\'|"].*?>(.*?)<\/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;
        }
    }
endif;
        
if (!function_exists('wp_loaded_add_gtm_data_vars')):
    function wp_loaded_add_gtm_data_vars() {
        ob_start('gtm_data_vars');
    }
endif;

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ページ時のみタグの改変を行っているので、通常ページは今まで通りです。

is_amp()関数についてはGitHubで確認してください。
cocoon/amp.php at master · yhira/cocoon · GitHub

技術的な事を言うと、DOMでhref値を取得しても良かったんですがDOMが使えない環境を考慮してこんな方法にしてみました(2019年になってそんなサーバーも無いと思うけど・・・笑)。

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

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

思いつきでぱぱぱーっと調べて書いてしまったので、もっとスマートなコードがあったら教えてください・・・笑。

実行結果

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

Googleタグマネージャー AMP - function.php追加

当サイトのAMPページ、ブログタイトル部分。しっかりdata-vars-href属性が付与されています

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

Googleタグマネージャー AMP - function.php追加

class属性が先にあるような場合でもOK

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

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

当ブログでもこのカスタマイズは採用しているので、気になる方は以下からAMPページにアクセスしてソースを見て頂ければと思います(パソコンからでもAMPページにはアクセスできます、適当なアンカータグを見てください)。

AMPでもGoogleタグマネージャーでアフィリエイトタグの計測をしよう!設定から測定まで全部解説!
Googleタグマネージャーを使ったアフィリエイトタグのクリック計測はアフィリエイトサイト、ブログ運営で非常に役に立ちます。 しかしWordPressテーマCocoonのAMP機能や、プラグインを使ったAMP機能では標準ではアンカータ...

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

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

ユーザー定義変数の作成

Googleタグマネージャー AMP - ユーザー定義変数の作成

変数>ユーザー定義変数の新規からユーザー定義変数を作成します

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

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

Googleタグマネージャー AMP - ユーザー定義変数の作成

変数名とAMP変数名ボックスにhrefを入力します

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

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

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

トリガーの作成

Googleタグマネージャ - トリガー

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

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

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

Googleタグマネージャー AMP - タグ作成

トリガータイプにクリックを選択し、タグ名をCSSセレクタ欄を入力します

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

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

トリガータイプはクリックを選択肢、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”]
afba[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”]
JANeta[href*=”j-a-net.jp”]
Link-Aa[href*=”link-a.net”]
ADVacka[href*=”advack.net”]
Smart-Ca[href*=”smart-c.jp”]

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

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

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

タグの作成

Googleタグマネージャ - タグ

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

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

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

Googleタグマネージャー AMP - タグ作成

タグの設定は項目が多いので落ち着いて行いましょう

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

トラッキングIDGoogleアナリティクスのトラッキング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を導入している場合はすぐに計測を開始して、早い段階からデータを集めておきましょう!

コメント

タイトルとURLをコピーしました