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。

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

作った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属性が付与されるようカスタマイズして行きます。

このカスタマイズは以下の記事を参考にさせて頂き、僕がアレンジしました。
▶ AMPページでクリックされたリンクテキストをGTMでトラッキングする手順 | ガジェットレビュー『2ミニッツ』
▶ 解決済み: GTMで設定してAMPでクリックイベント計測したい – Google 広告主コミュニティ
いち早く素晴らしい情報を提供して下さっている事に感謝申し上げます。

当カスタマイズでは

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

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

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

正規表現と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属性でも問題ありません。

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.neta[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を導入している場合はすぐに計測を開始して、早い段階からデータを集めておきましょう!

スポンサーリンク
Web
スポンサーリンク
\この記事いいね!と思ったらシェアしてね/
スポンサーリンク
L'7 Records

コメント

  1. pchan より:

    初めまして。大変参考になる記事をありがとうございます!
    現在Cocoonで本記事の内容を参考にampのクリック計測をしているのですが、
    Cocoonのバージョンをあげるとampページが崩れてしまいます。
    (function.phpから本記事のカスタマイズ内容を削除すると正常に表示されます。)
    バージョンを戻したり各設定を確認したところ、Cocoon Ver1.8.8の
    「HTML縮小化をしている際に再利用ブロック動作がおかしくなる不具合修正」
    によるものだと判明しました。
    (最新バージョンで高速化>HTML縮小化のチェックを外すと正常に表示されます。)

    なんとかCocoon最新バージョンでもampのクリック計測をしたいので、
    原因や解決策などがありましたら、ぜひご教示いただけないでしょうか。
    よろしくお願い致します。

    • けんちゃん けんちゃん より:

      不具合のご報告誠にありがとうございます・・・!
      早速不具合の確認させて頂きました、正規表現をちょっと変えると良さそうです!
      $atag_regex変数に正規表現のマッチパターンを定義しているので、中身を以下のように書き換えてみてください!

      これで僕の環境(Cocoon Ver2.0.7.5/HTML縮小化にチェック)だと正常に表示されAnalytics上でも拾えているんですがどうでしょうか?

      • けんちゃん けんちゃん より:

        すみませんコメント欄に正規表現の中身が記載できなかったので本文更新しておきます!
        本文中の$atag_regexの中身を使ってみてください・・・!

        • pchan より:

          返信ありがとうございます!
          私の環境でも無事動作しました!
          本当に助かりました、ありがとうございます。

          • けんちゃん けんちゃん より:

            再度のご報告ありがとうございます、お役に立てたようで嬉しいです!(というか今回教えて貰わなかったらしばらく気付かなかったのでめちゃくちゃ助かりました・・・!)
            また何かありましたら是非お気軽にお問い合わせ下さい!

  2. YUI より:

    初めまして。
    大変勉強になる記事をありがとうございます!

    知識不足で申し訳ないのですが、
    「トリガーの作成」で、「a[href*=”valuecommerce.com”]」を入力すると、『有効な CSS セレクタまたは変数を指定してください。』と赤字で表示されてしまいます。

    一文字ずつ入力していくと『.』のところで出てしまうように思えます。

    大変申し訳ございませんがどうかご教示お願いいたします。

    • けんちゃん けんちゃん より:

      記事を参考にして頂いてありがとうございます!
      トリガーのCSSセレクタの件ですが、もしその「a[href*=”valuecommerce.com”]」がそのまま入力されているとしたらダブルクオーテーションが全角になっているかと思われます・・・!

      僕の手元でコピペしてみた所全角だったので、下記の半角のものを一度コピペして試して頂けますでしょうか・・・!

      a[href*=”valuecommerce.com”]

      それでもダメだった場合再度お知らせ下さい、僕の方で原因調査してみます!

  3. 匿名 より:

    はじめまして、参考になる記事をありがとうございます。

    cocoonのアフィリエイトタグやテンプレートタグを利用すると
    挿入されるのですが
    それ以外ではdata-varsが付与されなくなってしまいました

    けんちゃんさんの方でも付与されていない気がするのですが
    動かなくなってしまったのでしょうか?

    お手数でなければ確認していただけると助かります・・・
    m(__)m

    • けんちゃん けんちゃん より:

      ご指摘ありがとうございます!
      うおおお本当ですね、試してみましたが拾えて無かったので取り急ぎ正規表現を変えてみました・・・!

      functions.phpに書き込むコードの4行目を変更してみたのでそちらに変更するとどうでしょうか?
      $atag_regex以降の部分です、コメント欄に正規表現が書き込めないため大変お手数ですが本文をご確認下さい。)

      今手元の環境でササッと試してみたら僕の方では取得できたのですが、可能であれば異なる環境でどうなるかご教示頂けると助かります・・・!
      なおAMPは通常キャッシュ反映されるまで時間がかかるので、場合よってはCocoon側でAMPのキャッシュを削除した上でGoogle Chromeのシークレットモードや普段使っていないブラウザからAMPページにアクセスしないとGoogle Analytics側では即座にイベント反映されないかもしれません。
      大変お手数ではございますが、一度試して頂けると幸いです・・・!

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