Google Analyticsは普通に設定しただけだと、自分のサイト内のクリック数はわかるのですが、外部サイトへのリンクのクリック数は計測してくれません。なので、例えばアフィリエイトリンクはどのくらいクリックされたのかな、など気になってしまいます。そんな外部リンククリック数を計測する3分で終わる超簡単な方法をご紹介します。
もくじ
手順
現在は当サイトの構成が変更されたので
|
1 |
<script src="https://raw.githubusercontent.com/tarky/jin-child/master/js/gasetting.js"></script> |
上のコードをご自身のサイトのHTMLのbodyの閉じタグ
</body>の直前にコピペしてください。（既にGoogleアナリティクスを導入済みで、普通にPVなどの計測ができていることが前提です）
以上。超簡単ですよね？3分かかりましたか？
動作確認として、Googleアナリティクスの左側のメニューからリアルタイム>イベントを開いて頂き、別のウィンドウなどでご自身のサイトにアクセスして頂き、適当に外部リンクをクリックしてみてください。すると下のように、すぐにイベントカテゴリーに「outbound」と、イベントアクションにクリックした外部リンクのURLが表示されるはずです。
SSL化したサイトで上記コードを挿入すると、Chromeで「承認されていないソースからのスクリプトを実行しようとしています」というメッセージが表示されてしまうようです。その場合は、上記スクリプトは削除ください。ご自身のサイトに gasetting.jsをアップロードし、そこから読み込むようにしてください。
あるページで「このページは承認されていないソースからのスクリプトを読み込もうとしています」と表示されていることに対処するにはどうすればよいでしょうか？
一体どんな設定をしたの？
細かい技術的なことは興味がある方のために記事の最後で説明しますが、まずどんな設定をしたかざっくり説明しますね。
この設定はGoogleアナリティクスのイベントトラッキングという仕組みを利用しています。通常ページ表示しか記録していないのですが、イベントトラッキングを使うと、ブラウザのあらゆる動作について情報をグーグルアナリティクスに送信し記録することができます。本手順では１行コピペしただけですが、サイトの全て外部リンクについてクリックした際の情報を送るようになりました。
具体的にどんな情報を送っているかというと、下の３つです。
| イベントカテゴリ | 「outbound」という文字列 |
| イベントアクション | クリックした外部リンクのURL |
| イベントラベル（任意） | リンクのaタグのname属性 |
その他に、当然デフォルトで送信している情報は記録されています。例えば、どのページでクリックされたのかなどは記録されています。
1ぺージ内に同URL向けの外部リンクが複数あるのを区分したい場合はイベントラベルを使う
基本的には、他に何も設定しなくてもイベントカテゴリとイベントアクションは送っているので使用可能です。これだけでどのページのどのユーザがいつどの外部リンクをクリックしたかがわかるからです。ただ、同じページに同じURL向けの外部リンクが複数ある場合、どのリンクがクリックされたか区別できません。
区別する必要がなければ別によいのですが、区別したい場合はaタグのname属性をそれぞれ指定してください。
例えば、記事の最初の方に、一度商品のリンクを紹介し、記事の終わりに再度紹介するということがよくあります。そして、どちらのリンクがクリックされてるんだろうと気になったりします。そのような場合は、
|
1 2 3 4 5 |
<a name="top" href="http://www.amazon.com/something.html">超素敵な商品のページ</a> ~中略~ <a name="bottom" href="http://www.amazon.com/something.html">超素敵な商品のページ</a> |
のように、nameに区別するための識別子を設定しておきます。そうすれば、Googleアナリティクスの画面から区別して見ることが可能です。
見やすいように「目標」を設定しよう
イベントアクションのURLを見ただけでは、パッと見どこへのリンクだかわかりにくいと思います。なので、イベントラベルで一意の識別子で指定して見やすくする、というのもいいのですが、それだとaタグのname属性を使うのでHTMLファイル内に修正を加えなくてはなりません。多くのURLを管理したい場合は大変になってきます。イベントラベルはあくまで同ページ内のリンクを区別したい時だけ使うのがおすすめです。
では、どうすれば見やすく管理できるかというと、Googleアナリティクスの「目標」という機能を使うことです。
「目標」を設定するとどうなるか
「目標」を使えば下のようにわかりやすい名前で、特定のURLをクリックした数を管理することができます。
目標というのを設定すると、「コンバージョン」（日本語で言うと「成約」）というメニューが使えるようになります。
通常、グーグルアナリティクスでは、問い合わせや購入などを「目標」に設定し、コンバージョンとする人が多いのかもしれませんが、このように外部リンクのクリックを「目標」にすることも可能です。
ちょっと余談ですが、アフィリエイターさんにとってのコンバージョン（成約）とは商品が売れて成果報酬が入ること、とも言えますが、広告主のサイトに送客すること自体をコンバージョンと考えるのもアリだと個人的には思います。というのは、送客したお客さんが広告主のサイトで買うかどうかは、アフィリエイターさんの力というよりも、広告主のサイト側の出来に依存するからです。もちろん送客前にテンションを上げておけば買う可能性は高まるというのはありますが、送客数を上げる努力をしておけば、テンションも上がるコンテンツになるはずです。
スポンサーリンク
「目標」の設定のしかた
画像の赤枠を順番にクリックして進めてください。
下のカテゴリには「outbound」と、アクションには「目標」に設定したい外部リンクのURLを入力してください。
上の画像で、もちろんラベルにも条件を設定でき、nameに指定した値を使えば同じページの特定の外部リンクのみを対象できます。ただ、個人的にはリンク単位で目標にするのではなく、URL単位で目標にし、その中からどのリンクの数が多いか少ないか、を見ていけばいいのではと思います。
というのは、実はこの目標、全部で20個しか作れません。そこまで多くのURLを対象にしたい人もいないと思いますが、リンク単位で作っていたらすぐに使い切ってしまうかもしれません。
また、見やすくなくてよければ、別に「目標」を作らなくても全ての外部リンクのクリック数のデータは取れているので、そんなに数を作る必要はないかとは思います。
ちなみに、上の画像の「等しい」となっているプルダウンを「正規表現」に変えて頂ければ、正規表現を使うことができます。例えば、商品にかかわらずAmazonへの外部リンクのクリックを全てを計測する「目標」を作りたい、と思った時には、
アクションのところでプルダウンから「正規表現」を選び、入力欄に「https://www.amazon.co.jp/*」などのようにすればOKです。
「*」（アスタリスク）はワイルドカードと呼ばれ、どんな文字列にもマッチするということです。
以下のようになれば「目標」の作成は完了です。
左側メニューのリアルタイム>コンバージョンを開いていただき、別ウィンドウなどで目標に設定したURL向けの外部リンクをクリックすると、下のように対象の目標名の横の数字が増えるはずです。
なお、この「目標」は一度作ると消すことができません。なぜこの仕様になっているのかわからないのですが、編集して目標の名前と内容を変えることはできます。20個までした作れないと書きましたが、足りなくなってきたら、不要な目標を編集して新しいものに変えていけば良いです。
注意点
iframe内のリンクのクリックは計測されません
これは多分どんな手法を使ってもGoogleアナリティクスで計測するのは難しいと思いますが、よくAmazonなどのリンクに見られる下のようなiframeを使ったリンクのクリックは計測されません。
ソースコードはこういうやつです。
|
1 |
<iframe src="http://rcm-fe.amazon-adsystem.com/e/cm?t=rakuzone-22&o=9&p=8&l=as1&asins=4798140252&ref=qf_sp_asin_til&fc1=000000&IS2=1<1=_blank&m=amazon&lc1=0000FF&bc1=000000&bg1=FFFFFF&f=ifr" style="width:120px;height:240px;" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe> |
なので、iframeではなく通常のaタグのリンクを使うようにするか、iframeについては計測を諦めるしかないと思います。
以下のケースの場合、動作しない可能性があります
- Googleアナリティクスのデフォルトのトラッキングコードを使用せず、特殊なコードを使用している場合
- 無料ブログなどで、運営側が特殊な設定をしている場合
gasetting.jsはまれに仕様変更するかもしれません
なんか人のサーバーにあるスクリプトを使うのはいやだな、と思う方はこれをダウンロードしてご自身のサーバーにアップロードして使ってもらっても問題ないです。
事前通知なしで時々機能をブラシュアップしていく可能性もあります。このページをブックマークし時おり見に来てください。更新情報を書いていきます。
上級者向け補足
以上の説明で十分使うことが可能です。この項は興味がある方がお読みいただければと思います。
スポンサーリンク
ネタ元
本手順で使ったgasetting.jsというJavaScriptは下のサイトにあるコードを参考に一部分だけ修正して使わせて頂いています。
Google Analyticsで外部リンクを計測する設定する（タグマネージャは使わない）
ただ、このコードだと、1ぺージ内に同URL向けの外部リンクが複数ある場合、どのリンクがクリックされたか区別することができません。なので、送信する情報を変更しています。
変更前
| イベントカテゴリ | 「outbound」という文字列 |
| イベントアクション | 「click」という文字列 |
| イベントラベル（任意） | クリックした外部リンクのURL |
変更後
| イベントカテゴリ | 「outbound」という文字列 |
| イベントアクション | クリックした外部リンクのURL |
| イベントラベル（任意） | リンクのaタグのname属性 |
要は、aタグにつけたなんらかの識別子を送れるようにしたかったので、イベントアクションで「click」というなんの意味もない情報を送るのをやめてURLを送るようにし、イベントラベルでname属性を送るようにした、ということです。
おそらくGoogleアナリティクスの本家のヘルプページでも「変更前」のような形の情報を送っているコードが出ていたので、そちらの方が本家の意向には沿っているのかもしれませんが、「変更後」の形でもなんら不都合はありません。
下のコードの41行目〜45行目を変更しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
(function trackOutbounds() { var hitCallbackHandler = function(url,win) { if (win) { window.open(url, win); } else { window.location.href = url; } }; var addEvent = function(el, eventName, handler) { if (el.addEventListener) { el.addEventListener(eventName, handler); } else { el.attachEvent('on' + eventName, function(){ handler.call(el); }); } } if (document.getElementsByTagName) { var el = document.getElementsByTagName('a'); var getDomain = document.domain.split('.').reverse()[1] + '.' + document.domain.split('.').reverse()[0]; // Look thru each a element for (var i=0; i < el.length;i++) { // Extract it's href attribute var href = (typeof(el[i].getAttribute('href')) == 'string' ) ? el[i].getAttribute('href') : ''; // Query the href for the top level domain (xxxxx.com) var myDomain = href.match(getDomain); // If link is outbound and is not to this domain if ((href.match(/^(https?:|\/\/)/i) && !myDomain) || href.match(/^mailto\:/i)) { // Add an event to click addEvent(el[i],'click', function(e) { var url = this.getAttribute('href'), win = (typeof(this.getAttribute('target')) == 'string') ? this.getAttribute('target') : ''; var label = (typeof(this.getAttribute('name')) == 'string') ? this.getAttribute('name') : ''; console.log ("add event", url); // Log even to Analytics, once done, go to the link ga('send', 'event', 'outbound', url, label, {'hitCallback': hitCallbackHandler(url,win)}, {'nonInteraction': 1} ); e.preventDefault(); }); } } } })(); |
さいごに
いかがでしたでしょうか？
たった3分の作業で外部リンクのクリック数を計測できるようになったのではないでしょうか？
ぜひ素晴らしいサイトの運営に活かしていただければと思います。
ちなみに、外部リンクのクリック数をこんな面倒な手順をしなくてもデフォルトで計測してくれるアクセス解析ツールを見つけました。その名もMatomo。
無料のツールで、サーバーにインストールして使うアクセス解析ツールです。
Googleアナリティクスと比較した記事を書きましたのでご覧ください。
