WordPress Diver AMPページのクリックを計測する設定方法(メモ)
WordPress Diver AMPページのクリックを計測する設定方法(メモ)
スポンサーリンク

WordPress Diver AMPページのクリックを計測する設定方法(メモ)

こんちゃ、前の記事でWordPressDiverテーマ Googleタグマネージャー で通常ページのクリックを計測する方法をご紹介しましたが今日は、AMPページで外部クリックを計測する方法をご紹介します。設定忘れないように記載しました。

実装方法などは、らくとん倶楽部様の記事を参考にさせていただきました。ありがと〜う!
GoogleタグマネージャでAMP版ページ内の外部リンクのクリック数を集計する方法

 

スポンサーリンク

AMPページのaタグにata-vars-href属性を持たす

AMPページのaタグ全てにdata-vars-href属性を持たせます。これは、タグマネージャー のユーザー定義変数にして利用できるようにします。

AMPページの<a>タグにdata-vars-href属性を追加する方法は、WordPressDiver子テーマのFunction.phpに記述。

※バックアップを取って作業を行なってください!Function.phpのファイルを戻せる体制にして行なってください。失敗すると復旧不可能になります。子テーマでやるように!

場所は、WordPress Diver 外観>テーマエディター

 

AMPページのaタグにata-vars-href属性を持たす

AMPページのaタグにata-vars-href属性を持たす

 

PHPソースについては、L’7 Recordsサイトを参考にさせていただきました。感謝!ありがと〜う!
AMPでもGoogleタグマネージャーでアフィリエイトタグの計測をしよう!設定から測定まで全部解説!

Cocoonテーマ用と記載がありますがDiverでも問題なく動作します。

 

スポンサーリンク

Googleタグマネージャー のAMPページ クリック設定

まず、タグマネージャー のAMP実装されていない方は、実装方法を紹介していますので先に実装してください。

 

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

Googleタグマネジャー 変数の設定を行います。タグマネージャー ワークスペース画面より

  1. 変数のメニューをクリック後、ユーザー変数新規をクリック。
  2. 変数名を入力
  3. AMP変数を選択
  4. AMP変数名をhrefと入力
  5. 保存をクリック

 

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

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

 

 

Googleタグマネージャートリガーの設定

Googleタグマネジャー トリガーの設定を行います。タグマネージャー ワークスペース画面より

  1. トリガーをクリック後、新規をクリック
  2. トリガー名を入力(アフィリエイトサイト名わかりやすい名前)
  3. クリックを選択
  4. a[href*="amzn.to"](アマゾンの場合)入力
  5. すべてのページを選択
  6. 保存をクリック
  7. それぞれ、アフィリエイトURL(ドメイン)を使用している分だけトリガーを作成します。

 

Googleタグマネージャートリガーの設定

Googleタグマネージャートリガーの設定

 

トリガーのタイプ

A8 a[href*="a8.net"]
Amazon a[href*="amazon.co.jp"] a[href*="amzn.to"]
afb a[href*="affiliate-b.com"] a[href*="afi-b.com"]
楽天 a[href*="rakuten.co.jp"]
アクセストレード a[href*="h.accesstrade.net"]

※アマゾン以外は取得できないので現在調査中!

 

 

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

Googleタグマネジャー タグの設定を行います。タグマネージャー ワークスペース画面より

  1. タグメニューをクリック後、新規をクリック
  2. タグ名を入力(わかりやすい名前)
  3. アナリティクスを選択
  4. アナリティクスIDを入力
  5. イベントを選択
  6. カテゴリー名を入力(わかりやすい名前)
  7. href変数を選択
  8. hrefとPageURLを選択
  9. トリガーは、アマゾンクリックを選択(作ったトリガー)
  10. 保存をクリック
  11. 制作したトリガー分だけタグも制作してください。

 

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

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

 

 

Googleタグマネージャー公開設定

AMPページのクリック計測したいアフィリエイトの登録を染ませたら公開設定を行います。ワークスペース画面に設定したトリガーやタグが表示されていますので公開ボタンをクリックします。

 

Googleタグマネージャー公開設定

Googleタグマネージャー公開設定

 

 

変更の送信画面が表示されるので公開ボタンをクリック。

 

Googleタグマネージャー公開設定

Googleタグマネージャー公開設定

 

 

 

Googleアナリティクス AMPページクリック取得表示

Googleアナリティクスのイベントにはこのように表示されます。

Googleアナリティクス AMPページクリック取得表示 イベント

Googleアナリティクス AMPページクリック取得表示 イベント

 

Googleアナリティクス AMPページクリック取得表示 アクション

Googleアナリティクス AMPページクリック取得表示 アクション

 

Googleアナリティクス AMPページクリック取得表示 ラベル

Googleアナリティクス AMPページクリック取得表示 ラベル

 

Googleアナリティクススマホアプリ

Googleアナリティクススマホアプリ

Googleアナリティクススマホアプリ

 

 

最後まで読んでいただき有難うございます。この、紹介記事が良ければGoodボタンをよくない場合はBadボタンをお願いします。

スポンサーリンク

この記事が気に入ったら
フォローしよう

最新情報をお届けします

Twitterでフォローしよう

おすすめの記事
スポンサーリンク