------------この記事の目次------------
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属性を持たす
PHPソースについては、L’7 Recordsサイトを参考にさせていただきました。感謝！ありがと〜う！
AMPでもGoogleタグマネージャーでアフィリエイトタグの計測をしよう！設定から測定まで全部解説！
Cocoonテーマ用と記載がありますがDiverでも問題なく動作します。
Googleタグマネージャー のAMPページ クリック設定
まず、タグマネージャー のAMP実装されていない方は、実装方法を紹介していますので先に実装してください。
Googleタグマネージャー 変数の設定
Googleタグマネジャー 変数の設定を行います。タグマネージャー ワークスペース画面より
- 変数のメニューをクリック後、ユーザー変数新規をクリック。
- 変数名を入力
- AMP変数を選択
- AMP変数名をhrefと入力
- 保存をクリック
Googleタグマネージャー 変数の設定
Googleタグマネージャートリガーの設定
Googleタグマネジャー トリガーの設定を行います。タグマネージャー ワークスペース画面より
- トリガーをクリック後、新規をクリック
- トリガー名を入力（アフィリエイトサイト名わかりやすい名前）
- クリックを選択
- a[href*="amzn.to"]（アマゾンの場合）入力
- すべてのページを選択
- 保存をクリック
- それぞれ、アフィリエイトURL(ドメイン)を使用している分だけトリガーを作成します。
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タグマネジャー タグの設定を行います。タグマネージャー ワークスペース画面より
- タグメニューをクリック後、新規をクリック
- タグ名を入力（わかりやすい名前）
- アナリティクスを選択
- アナリティクスIDを入力
- イベントを選択
- カテゴリー名を入力(わかりやすい名前）
- href変数を選択
- hrefとPageURLを選択
- トリガーは、アマゾンクリックを選択（作ったトリガー）
- 保存をクリック
- 制作したトリガー分だけタグも制作してください。
Googleタグマネージャータグの設定
Googleタグマネージャー公開設定
AMPページのクリック計測したいアフィリエイトの登録を染ませたら公開設定を行います。ワークスペース画面に設定したトリガーやタグが表示されていますので公開ボタンをクリックします。
Googleタグマネージャー公開設定
変更の送信画面が表示されるので公開ボタンをクリック。
Googleタグマネージャー公開設定
Googleアナリティクス AMPページクリック取得表示
Googleアナリティクスのイベントにはこのように表示されます。
Googleアナリティクス AMPページクリック取得表示 イベント
Googleアナリティクス AMPページクリック取得表示 アクション
Googleアナリティクス AMPページクリック取得表示 ラベル
Googleアナリティクススマホアプリ
Googleアナリティクススマホアプリ
最後まで読んでいただき有難うございます。この、紹介記事が良ければGoodボタンfa-thumbs-o-upをよくない場合はBadボタンfa-thumbs-o-downをお願いします。
