らくとん倶楽部
ラクトンC10(γ-デカラクトン)とラクトンC11(γ-ウンデカラクトン)の香りに魅了された日々の備忘録

GoogleタグマネージャでAMP版ページ内の外部リンクのクリック数を集計する方法

GoogleタグマネージャでAMP版ページ内の外部リンクのクリック数を集計する方法

アフィリエイトリンク等の外部リンクがクリックされた事をGoogleアナリティクスで集計する方法は、少しググれば沢山出てきます。Googleタグマネージャ(GTM:Google Tag Manager)を設置して、クリックイベントを計測することで比較的簡単に実現出来ます。

しかしこれと同じ事をAMPページでやろうとすると、そうそう簡単にはいきません。Google検索してもほとんど情報が出てこない‥‥。そこで、国内のみならず海外のウェブサイトも参考にしながら、いろいろと試行錯誤したところ、ようやくAMPページにおいても外部リンクのクリックをGoogleアナリティクスで集計する事が出来るようになったので、ここにその方法を公開致します。

イベントトラッキングとは

アクセス解析は通常そのページが読み込まれた時点で集計されるので、ページ遷移を伴わない以下のような行為はアクセス解析では把握する事が出来ません。

  • クリック
  • ダウンロード
  • 画面スクロール

このようなイベントを計測する事をイベントトラッキングと言いますが、実はイベントトラッキングはGoogleタグマネージャを使うと容易に実現する事が出来ます。

一般ページの場合

ここでは一般ページ(非AMPページ)にGoogleタグマネージャを設置し、外部サイトのリンクをクリックした事をGoogleアナリティクスで集計する方法について解説します。

Googleタグマネージャの設置 (通常版)

Googleタグマネージャの設置方法は簡単で、以下の2つのコードをHTMLのheadタグ内とbodyタグ内にそれぞれ記述すればOKです。

以下のコードを <head> 内のなるべく上の方に貼り付けます。

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
<!-- End Google Tag Manager -->

以下のコードを <body> の先頭に貼り付けます。

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

ここで「GTM-XXXXXXX」はGoogleタグマネージャのIDになります。

コンテナの作成と設定 (通常版)

まず最初にコンテナを作成します。一般ページの場合は、コンテナ使用場所として「ウェブ」を選択します。コンテナ名は任意ですが、「ウェブサイト名」(本サイトの場合は「らくとん倶楽部」)としておくと良いでしょう。最後に「作成」ボタンをクリックすればコンテナ作成完了です。

コンテナ (通常版)

組み込み変数の設定 (通常版)

様々なイベントトラッキングが可能なGoogleタグマネージャですが、デフォルトでは多くの組み込み変数が有効化されていません。特に今回必要なクリックイベント系の組み込み変数がデフォルトでは全て無効になっているのでこれらを有効化します。

Googleタグマネージャの管理画面を開き、左側サイドメニューの「変数」をクリックします。画面上部にある組み込み変数の「設定」をクリックし、以下の組み込み変数にチェックを入れてこれらを有効化して下さい。

  • Click Element
  • Click Classes
  • Click ID
  • Click Target
  • Click URL
  • Click Text

この中で今回実際に使用するのは最後の2つ「Click URL」と「Click Text」ですが、今後使用する可能性もあるのでとりあえずクリック系は全てチェックしておきましょう。

組み込み変数 (通常版)

トリガーの作成と設定 (通常版)

クリックイベントを発火させるタイミングを設定するトリガーを定義します。Googleタグマネージャの管理画面を開き、左側サイドメニューの「トリガー」をクリックします。画面上部にある「新規」をクリックし、以下の通り設定します。

トリガーのタイプリンクのみ
タグの配信を待つチェックする
待ち時間の上限2000(デフォルト値のまま)
妥当性をチェックチェックしない

ここから急に難しくなります。「これらすべての条件が true の場合ここのトリガーを有効化」と記載されている箇所の下にトリガーを書くのですが、2つ設定する必要があります。最初に定義するのは集計対象とするページをどのページにするかです。もし全てのページを集計対象とする場合、「Page URL」「正規表現に一致」「.*」と入力して下さい。

これは「Page URL」つまり、ページのURLが「.*」で表される正規表現の条件パターンにマッチした時という意味で、「.*」の「.(ドット)」は「いかなる文字」、「*(アスタリスクマーク)」は「0文字以上の繰り返し」の意味で、「.*」と書けば「いかなる文字列」という意味になります。「いかなる文字列に対して一致する」が条件ですから、結局は全てのページを対象とする事になります。

続いて、2つ目の設定「このトリガーの発生場所」ですが、ここは「一部のリンククリック」を選択します。先ほどのPage URLと同様3つのプルダウンメニューとテキストボックスが表示されますが、リンク先に関係無く一律「外部リンク」として管理するだけで良ければ、「Click URL」「含まない」「あなたのサイトのドメイン名」と入力して下さい。ドメイン名は例えば本サイトであれば「lactone.club」になります。トリガーの名称を「外部リンク」として保存すれば完成です。

一方、リンク先によって別々に管理したい場合、例えば、アフィリエイトサイト別に集計したい場合は次のように設定します。

  • A8.netの場合
    Click URL」「含む」「a8.net
  • afbの場合
    Click URL」「正規表現に一致」「(affiliate-b\.com|afi-b\.com)
  • Amazonの場合
    Click URL」「正規表現に一致」「(amazon\.co\.jp|amzn\.to)
  • 楽天の場合
    Click URL」「含む」「rakuten.co.jp

登録するアフィリエイトサイトをひとつ選んで、トリガー名に、外部リンク一括管理なら「外部リンク」、A8.netなら「A8.net」、楽天なら「楽天」などと設定して「保存」ボタンを押下して下さい。

トリガー (通常版)

別のアフィリエイトサイトのトリガーを登録したい時は、また「新規」をクリックし、同じ内容で設定し、最後のトリガー条件のところだけ変更して保存します。4つのアフィリエイトサイト全てを登録する場合は、全部で4つのトリガーを作成する事になります。

タグの作成と設定 (通常版)

続いて、これまで作成した組み込み変数・トリガーを組み合わせて実際にウェブページに設置(正確には配信)するタグを定義します。

Googleタグマネージャの管理画面を開き、左側サイドメニューの「タグ」をクリックします。画面上部にある「新規」をクリックし、以下の通り設定します。

タグタイプGoogle アナラティクス - ユニバーサル アナリティクス
トラッキングタイプイベント
カテゴリ外部リンク外部リンク一括管理の場合
A8.netA8.netの場合
afbafbの場合
AmazonAmazonの場合
楽天楽天の場合
アクション{{Click URL}}
ラベル{{Click Text}}:{{Page URL}}
空欄のままにしておいて下さい
非インタラクション ヒット
Google アナラティクス設定デフォルトのままにして下さい
このタグでオーバーライド設定を有効にするチェックする
トラッキング IDUA-XXXXXXXX-X

トラッキングIDはUAから始まるGoogleアナリティクスのトラッキングIDを指定します。

以下は「A8.net」用のタグ設定例です。

タグ (通常版)

次にこのタグに紐づけるトリガーとして、先に作成した「A8.net」用のトリガーを選択します。

トリガーの選択 (通常版)

「A8.net」にチェックを入れ右上の「追加」をクリックすると、無事タグに「A8.net」用のトリガーが設定されました。

タグと関連付けられたトリガー (通常版)

少しややこしいですが、「A8.net」という名前のタグに「A8.net」という名前のトリガーを設定した事になります。同じやり方で、「afb」「Amazon」「楽天」のタグを作成して、全部で4つのタグを作成しましょう。最終的には以下のようになります。

タグ一覧 (通常版)

上記はアフィリエイトサイト別に個別に設定する場合です。外部リンク一括管理の場合は「外部リンク」というタグに「外部リンク」というトリガーを設定して下さい。

タグの公開 (通常版)

タグが完成したら、あとはこれを公開してウェブページに配信すれば実際に集計が開始されます。Googleタグマネージャの凄いところは、一度タグのHTMLコードをウェブページに記載しさえすれば、そこで集計する項目やイベント、収集条件などに変更があってもHTMLコードの変更は一切不要で、このGoogleタグマネージャ上で変更して公開(配信)手続きをとるだけで済むところにあります。

画面右上の「公開」ボタンをクリックするとバージョン名などの入力を促されますが、特に問題なければ空欄のままでもう一度「公開」ボタンをクリックすれば、設定したタグが公開されます。タグが複数あったとしてもこの手続きは1回行えばOKです。

タグの公開 (通常版)

AMPページの場合

ここではAMPページにGoogleタグマネージャを設置し、外部サイトのリンクをクリックした事をGoogleアナリティクスで集計する方法について解説します。

Googleタグマネージャの設置 (AMP版)

Googleタグマネージャの設置方法は簡単で、以下の2つのコードをHTMLのheadタグ内とbodyタグ内にそれぞれ記述すればOKです。

以下のコードを <head> の最後に貼り付けます。

<!-- AMP Analytics --><script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

以下のコードを <body> の先頭に貼り付けます。

<!-- Google Tag Manager -->
<amp-analytics config="https://www.googletagmanager.com/amp.json?id=GTM-XXXXXXX&gtm.url=SOURCE_URL" data-credentials="include"></amp-analytics>

ここで「GTM-XXXXXXX」はGoogleタグマネージャのIDになります。コードもGoogleタグマネージャのIDも一般ページのものとは異なるので注意して下さい。

コンテナの作成と設定 (AMP版)

まず最初にコンテナを作成します。AMPページの場合は、コンテナ使用場所として「AMP」を選択します。コンテナ名は任意ですが、「ウェブサイト名 AMP版」(本サイトの場合は「らくとん倶楽部 AMP版」)としておくと良いでしょう。最後に「作成」ボタンをクリックすればコンテナ作成完了です。

コンテナ (AMP版)

ユーザー定義変数の設定 (AMP版)

AMPページではリンク先URL(Click URL)や被リンクテキスト(Click Text)などの組み込み変数を使用する事が出来ません。これら無くても外部サイトのリンクがクリックされた事は計測する事は出来ますが、このままでは何がクリックされたかわからないのであまり意味の無いアクセス解析になってしまいます。被リンクテキストはさておき、少なくともリンク先URLがわからないと話になりません。

そこでユーザー定義変数としてリンク先URLが利用できるようにするために、 <a> タグに「data-vars-href」という属性を持たせ、元来 <a> タグの「href」属性にのみ記述していたリンク先URLに加えて、「data-vars-href」属性にもリンク先URLを記述しておきます。

<a href="hogehoge">リンク文字列</a>

具体的には元々上記のような表記だったものを全て下記のような表記に変更します。

<a href="hogehoge" data-vars-href="hogehoge">リンク文字列</a>

AMPページは自動生成していると思います。AMPページ生成時に <a> タグを修正するようなコードを組み込んでみて下さい。AMPページ内の <a> タグを全て修正できたら下準備は完了です。次にGoogleタグマネージャでこのユーザー定義変数を利用できるようにします。

Googleタグマネージャの管理画面を開き、左側サイドメニューの「変数」をクリックします。画面下部にあるユーザー定義変数の「新規」をクリックし、以下のように設定して、画面右上の「保存」をクリックしてこれを保存して下さい。

名前href
変数タイプAMP変数
AMP変数名href

設定が完了するとGoogleタグマネージャ上では以下のように表示されます。AMP変数名は「{{href}}」ではなく「href」が正解なので注意して下さい。

ユーザー定義変数 (AMP版)

トリガーの作成と設定 (AMP版)

クリックイベントを発火させるタイミングを設定するトリガーを定義します。Googleタグマネージャの管理画面を開き、左側サイドメニューの「トリガー」をクリックします。画面上部にある「新規」をクリックし、以下の通り設定します。

トリガーのタイプクリック
CSS セレクタ (このクリックを適用する要素)外部リンクa:not([href*="あなたのサイトのドメイン名"])
A8.neta[href*="a8.net"]
afba[href*="affiliate-b.com"], a[href*="afi-b.com"]
Amazona[href*="amazon.co.jp"], a[href*="amzn.to"]
楽天a[href*="rakuten.co.jp"]
このトリガーの発生場所すべてのページ

一般ページではトリガー条件としてPage URL(ページURL)は全ページ対象とし、リンク先URL(Click URL)でドメイン名のチェックをしていました。ところがAMPページではリンク先URL(Click URL)を使用する事が出来ません。先にユーザー定義変数としてリンク先URL情報を含んだ「href」を定義しました。ここでこの「href」が使って一般ページと同じようにリンク先URLに応じて条件分岐できるかと思っていろいろ試したのですが、「このトリガーの発生場所」の設定において、どうしてもユーザー定義変数「href」を使ったドメイン指定をする事が出来ませんでした。

結局、ユーザー定義変数「href」は後述する「アクション」や「ラベル」として利用するために用意しているもので、トリガー条件としては利用する事は出来ないようです。では何でトリガー条件を定義するのでしょうか。それが「CSSセレクタ」です。CSSセレクタにリンク先URLのドメイン情報を設定して、トリガー条件を定義します。正規表現とはまた違った表記方法となっているので注意が必要です。

登録するアフィリエイトサイトをひとつ選んで、トリガー名に、外部リンク一括管理なら「外部リンク」、A8.netなら「A8.net」、楽天なら「楽天」などと設定して「保存」ボタンを押下して下さい。

トリガー (AMP版)

別のアフィリエイトサイトのトリガーを登録したい時は、また「新規」をクリックし、同じ内容で設定し、トリガー条件(CSSセレクタ)のところだけ変更して保存します。4つのアフィリエイトサイト全てを登録する場合は、全部で4つのトリガーを作成する事になります。

定番アフィリエイトサイト

ここで参考までに本サイトで活用しているアフィリエイトサイトを2つ紹介します。A8.netはアフィリエイト界の老舗サイトの一つで、当時はあたりまえのように存在した「ウェブサイト審査」を一切無くし、誰でもアフィリエイトを始められるようにしたパイオニアです。

A8.netA8.net
Author: (株)ファンコミュニケーションズ
アフィリエイトとは成果報酬型の広告システムのことです。メディア(ブログやサイト)を持っている個人や企業が広告主の商品やサービスを自分が運営しているメディアで紹介します。そのメディアから商品の購入やサービスの利用がされると広告主から成果報酬を受け取ることができます。 A8.netでは様々なジャンルのアフィリエイト広告を取り扱っており、サイトやブログさえあれば無料でアフィリエイトを始める事ができます。

afbがサービスを開始したのは比較的最近ですが、報酬支払先として現金以外にドットマネー等のポイントを選べるため航空会社のマイルを集めている陸マイラーに人気のアフィリエイトサイトです。取り扱っている広告案件がA8.netの隙間を見事に補完している感じで、A8.netとafbの2社登録しておけばおおよその広告案件はカバーできると思います。

afbafb
Author: (株)フォーイット
「afb」とは、株式会社フォーイット(東証2部上場の(株)フルスピードの100%子会社)が運営するASP。4年連続で利用者満足度率No.1に選ばれました!「パートナー第一主義」を掲げ、支払いサイクルは業界最速。消費税分も上乗せしてお支払いし、振込手数料はもちろん無料です。「afbひろば」では記事の売買が可能。文章書くのが得意だけど自分自身のサイトを持っていない人と、書きたい記事があるけど時間が無いサイトオーナーとをマッチングして、サイトの成長スピードを大幅に向上させてくれます。

タグの作成と設定 (AMP版)

続いて、これまで作成した組み込み変数・トリガーを組み合わせて実際にウェブページに設置(正確には配信)するタグを定義します。

Googleタグマネージャの管理画面を開き、左側サイドメニューの「タグ」をクリックします。画面上部にある「新規」をクリックし、以下の通り設定します。

タグタイプGoogle アナラティクス - ユニバーサル アナリティクス
トラッキングタイプイベント
カテゴリ外部リンク外部リンク一括管理の場合
A8.netA8.netの場合
afbafbの場合
AmazonAmazonの場合
楽天楽天の場合
アクション{{href}}
ラベル{{href}}:{{Page URL}}

トラッキングIDはUAから始まるGoogleアナリティクスのトラッキングIDを指定します。

ここでアクションに「{{href}}」、ラベルに「{{href}}:{{Page URL}}」とユーザー定義変数の「href」が登場しました。これは外部リンクがクリックされイベントが発生した際に、Googleアナリティクスでどのリンクがクリックされたか判別するために用います。具体的にはアクションおよびラベルにクリック先URLであるユーザー定義変数の「href」が定義されており、そのURLがGoogleアナリティクスに表示されます。一般ページでは「Click Text」というリンクされている文字列を表す組み込み変数があり、これをラベルに用いていたのですが、AMP版ではこのような組み込み変数は存在しないので「href」(リンク先URL)で代用しています。ユーザー定義変数「href」を作成した時と同じように「data-vars-clickText」とか用意してHTMLコードに書いておけば被リンクテキストをラベルに用いる事が出来ますが、今回はこの処理はしていません。

以下は「A8.net」用のタグ設定例です。

タグ (通常版)

次にこのタグに紐づけるトリガーとして、先に作成した「A8.net」用のトリガーを選択します。

トリガーの選択 (AMP版)

「A8.net」にチェックを入れ右上の「追加」をクリックすると、無事タグに「A8.net」用のトリガーが設定されました。

タグと関連付けられたトリガー (AMP版)

少しややこしいですが、「A8.net」という名前のタグに「A8.net」という名前のトリガーを設定した事になります。同じやり方で、「afb」「Amazon」「楽天」のタグを作成して、全部で4つのタグを作成しましょう。最終的には以下のようになります。

タグ一覧 (AMP版)

上記はアフィリエイトサイト別に個別に設定する場合です。外部リンク一括管理の場合は「外部リンク」というタグに「外部リンク」というトリガーを設定して下さい。

タグの公開 (AMP版)

タグが完成したら、あとはこれを公開してウェブページに配信すれば実際に集計が開始されます。これは一般ページ向けのGoogleタグマネージャと同一手順となります。繰り返しになりますが、Googleタグマネージャの凄いところは、一度タグのHTMLコードをウェブページに記載しさえすれば、そこで集計する項目やイベント、収集条件などに変更があってもHTMLコードの変更は一切不要で、このGoogleタグマネージャ上で変更して公開(配信)手続きをとるだけで済むところにあります。

画面右上の「公開」ボタンをクリックするとバージョン名などの入力を促されますが、特に問題なければ空欄のままでもう一度「公開」ボタンをクリックすれば、設定したタグが公開されます。タグが複数あったとしてもこの手続きは1回行えばOKです。

タグの公開 (AMP版)

Googleアナリティクスでの見方

イベント(外部リンクのクリック)が発生すれば、Googleアナリティクスの「行動」の下に「イベント」「概要」があるので、そこでイベント発生状況を確認する事ができます。

Googleアナリティクスでの見方

ちなみに上の図では、一般ページもAMPページもイベントカテゴリはアフィリエイトサイト名にしているので、一般ページとAMPページの合算値が表示されています。

実際にクリックされたリンクのURLを参照したい時は「イベントアクション」、どのページでクリックされたのかは「イベントラベル」を参照すればわかります。

Webマーケティングに関わるあらゆる業務は、ツールを使うだけでは、売り上げなどの成果につながりません。本書では導入・設定、操作方法だけでなく、「いかにして成果につながるサイト改善を実施していくか」まで学べます。Web解析およびGoogleアナリティクスのスペシャリストであり、公式コミュニティの「トップコントリビューター」にも認定された筆者による、豊富なケーススタディに基づく知見をサイト運営に役立ててください。
Amazonで購入 楽天で購入
Amazonで購入 楽天で購入
本書は、マンガと実践で学ぶGoogleアナリティクスの入門書です。Googleアナリティクスを使ったアクセス解析の基本や理解が難しい概念はもちろん、マーケティングについてもマンガと実践でわかりやすく解説しています。ユニバーサルアナリティクス&タグマネージャに対応しています。
Amazonで購入 楽天で購入
Amazonで購入 楽天で購入
「Webサイトを運営しているけれど、いまいち伸ばせてない」「そもそもどの方向にサイトを伸ばしていいかわからない」「色々な施策を行っているけれど、それぞれの施策がつながっていない」そんな悩みを持つ方は多いのではないでしょうか。本書は、そんな方にとって助けとなるように、Webサイトを成長させるための主な施策とその分析方法、そして改善の考え方そのものを包括的にまとめた書籍です。
Amazonで購入 楽天で購入
Amazonで購入 楽天で購入
らくとん
作成日 2019年01月31日 23時20分
更新日 2019年04月25日 00時38分
9621文字
Twitter Facebook はてなブックマーク Pocket
■ 関連記事
らくとん倶楽部らくとん倶楽部
Author: らくとん
ウェブサイトのコンテンツ情報をGoogleをはじめとした検索エンジンに的確に伝えるための手段である構造化データ。この構造化データが正しく記述されているかどうかをチェックするためのツールがGoogleか...
らくとん倶楽部らくとん倶楽部
Author: らくとん
「パンくずリスト」なる言葉をご存知でしょうか?ウェブサイトを閲覧する中で、今自分がどのようなカテゴリのページを見ているのかを把握し、それを視覚化するために設けられた道先案内役とも言える文字列のことを「...