GTMとGoogle AnalyticsでFacebookとTwitterのボタンクリックを計測する

GTM (Google Tag Manager) + Google Analyticsで、FacebookとTwitterのボタンクリックを計測する方法です。
こちらは2016年8月8日の情報です。
どうせまたGTMもGAも、画面が変わってしまうと思いますので。

GTMの初期設定

まずはGTMのアカウント作成、コンテナ作成。
GTMのタグをHTMLに入れて、PVが計測できる状態まで設定します。

変数を作る

  • GTM管理画面左側の「変数」をクリック
  • 「新規」ボタンをクリック
  • 「データレイヤーの変数」をクリック
  • 「データレイヤーの変数名」に「socialAction」と入力
  • 「変数を作成」ボタンをクリック。
  • 「変数名の変更」で「socialAction」と入力、「保存」ボタンをクリック
  • これで変数「socialAction」ができました
  • 同じように「socialNetwork」「socialTarget」を作ります

スクリーンショット 2016-08-08 16.23.20

トリガーを作る

  • GTM管理が面左側の「トリガー」をクリック
  • 「新規」ボタンをクリック
  • 「カスタムイベント」をクリック
  • イベント名を「socialEvent」に
  • トリガー配信は「event」「等しい」「socialEvent」
  • 「トリガーを作成」ボタンをクリック
  • 「トリガー名の変更」で「social」と入力、「保存」ボタンをクリック

スクリーンショット 2016-08-08 16.23.52

タグを作る

  • GTM管理が面左側の「タグ」をクリック
  • 「新規」ボタンをクリック
  • 「プロダクトを選択」で「Google Analytics」をクリック
  • 「タグの種類を選択」で「ユニバーサルアナリティクス」をクリック
  • 「トラッキングID」に対象サイトのGAのUA番号を入力
  • 「トラッキングタイプ」のプルダウンで「ソーシャル」を選択
  • 「ネットワーク」は「{{socialNetwork}}」、「アクション」は「{{socialAction}}」、「アクションターゲット」は「{{socialTarget}}」を入力し
  • 「続行」ボタンをクリック
  • 「配信するタイミング」で「その他」をクリック
  • 先ほど作ったトリガー「social」にチェックを入れ、「保存」ボタンをクリック
  • 「タグを作成」ボタンをクリック
  • 「タグ名の変更」で「social」と入力、「保存」ボタンをクリック

スクリーンショット 2016-08-08 16.23.37

公開

作った変数、トリガー、タグを公開します。

ソース

ソースの変更方法

GTMのタグを入れる

3〜11行目。GTMのタグを入れてあります。

FB関数を初期化する

FB.eventでfacebookのイベントを取れるよう、16行目〜21行目を書きます。

trackFacebook関数呼び出し

52行目から書かれているtrackFaebook関数を、ここ(23行目)で呼び出しています。

facebookのsdk.js呼び出し

26〜32行目。普通のsdk.jsの呼び出し方法です。
30行目と20行目で違うversionが指定されていると動かないはずなので注意。

widgets.js呼び出し

36〜41行目。
twitter純正シェアボタンなどのwidgets.js呼び出しと微妙に違うので注意してください。

イベントをGAに送る

52行目〜64行目で、FB.eventが発生したらdatalyer.pushでGAにデータを送っています。

注意点

  • Facebookのシェアは計測できません
  • twitterはclickとtweetの両方のイベントが取れてしまいます

参考サイト

Google Analyticsのソーシャルプラグイン解析について(タグマネージャーとユニバーサルアナリティクス対応)


FacebookとTwitterのボタンクリックをGoogle Analyticsで計測する

Webページ内にFacebookやTwitterの純正ボタンを入れると、iframeだったりなんだりで、Google Analyticsのクリック計測が簡単にはできない。
FacebookのSDK(sdk.js)とTwitterのwidgets.jsを使って、GAの「集客」「送客」「プラグイン」で集客できるようにしてみる。

<div id=”fb-root”></div>
<script src = “//connect.facebook.net/ja_JP/sdk.js”></script>
<script>
window.fbAsyncInit = function() {
FB.init({
xfbml : true,
version : ‘v2.5’
});
};
FB.Event.subscribe(‘edge.create’, function(targetUrl) {ga(‘send’, ‘social’, ‘facebook’, ‘like’);});
FB.Event.subscribe(‘edge.remove’, function(targetUrl) {ga(‘send’, ‘social’, ‘facebook’, ‘unlike’);});
window.twttr=(function(d,s,id){var t,js,fjs=d.getElementsByTagName(s)[0];if(d.getElementById(id))return;js=d.createElement(s);js.id=id;js.src=”https://platform.twitter.com/widgets.js”;fjs.parentNode.insertBefore(js,fjs);return window.twttr||(t={_e:[],ready:function(f){t._e.push(f)}})}(document,”script”,”twitter-wjs”));
twttr.ready(function (twttr) {twttr.events.bind(‘click’, function (e) {ga(‘send’, ‘social’, ‘twitter’, ‘click’); });
});</script>

詳しくはanalytics.jsのソーシャル インタラクション関連ページをどうぞ。

Lineボタンなどは

<script>
jQuery(function () {
jQuery(“.social_button_line”).click(function () {
ga(‘send’, ‘social’, ‘line’, ‘click’);
});
});
</script>

みたいな感じで、class(上の例では.social_button_line)のclickを計測してga(‘send’, ‘social’, ‘line’, ‘click’);すればいいです。

これで、「集客」「送客」「プラグイン」の「ソーシャルネットワークとアクション」に
facebook : like
facebook :unlike
twitter: click
line : click
の数が集計されます。


iPhoneのGoogle Analyticsアプリがバージョンアップされた

iPhone用のGoogle Analyticsアプリがバージョンアップされ、バージョン3.0になりました。

リリースノートより

バージョン 3.0 の新機能

* Sharing! Share a report via text, email, chat, and more
* Customization! Customize reports and save them to your dashboard for quick follow-up
* Brand new look & feel; easier to use than ever
* New scorecard visualizations: tab through metrics, swipe through dimensions
* Change & compare date ranges, dig deeper by adding segments
* Greatly simplified navigation and report discovery

何が変わったのか

1. 共有:レポートをテキスト、メール、チャットで共有
2. カスタマイズ:よく使用するレポートをマイレポートとして保存
3. 新しいルック&フィール:簡単に使える
4. 新しい表示方法:タブとスワイプで表示項目を切り替え
5. データ表示期間の変更と比較にセグメントを追加可能
6. ナビゲーションの簡易化

実際に使ってみる

アイコンが変わった

icon
まずこれに慣れるのに時間がかかりそうですね。

ナビゲーションの簡易化

IMG_2288
左上のハンバーガーメニューから開くナビゲーション。
以前のバージョンでは「ユーザー」などの項目をタップするとサブメニューが表示されるドリルダウン型でしたが、バージョン3.0ではサブメニューは廃止。
レポート画面でタブ・スワイプでレポートを切り替える方式になりました。

セグメント

IMG_2289
データ表示期間に、新規・リピート、検索・参照トラフィック、コンバージョンが達成された訪問、モバイルのトラッフィクなどフィルタが設定できるようになりました。

ファーストインプレッション

UIが大きく変わったので、慣れるまで時間がかかりそうですね。
いまだにページビューをどこで見るのか、見つかりません笑
タブ&スワイプでレポートを切り替えられるようになった分、1画面に表示される情報量が増加しました。
その分、データが表示されるまで時間がかかるのが気になります。
すぐに見ておきたい情報は、マイレポートに登録しておき、細かく見たい時に通常レポートをチェックする、という使い方がいいかもしれませんね。
フィルタは便利ですね。
ラベル文字が大きすぎたり、グラフの下の時間表示が見にくかったり、日本語にうまく最適化できていない部分が気になります。

僕ら1日24時間ログを見ているユーザーにとって、最も重要なアプリなので、新しい機能の追加やUIの改善はありがたいですね。

以上、速報レポートでした。


Google Analyticsで広範囲のIPアドレス除外

これもいまさらかもしれませんが、Google AnalyticsのIPアドレス除外の話。
(これは2015年10月後半時点の情報。またしばらくたったら画面とか変わって、メニュー構成も変わると思うので。)

自社内のIPアドレスからのアクセスをGAで計測したくない、ということはよくあると思います。
そういう場合は、「アナリティクス設定」「すべてのフィルタ」「フィルタを追加」をクリック。

IPアドレスが一個の場合

フィルタ名を入力し、フィルタの種類は「定義済み」タブで「除外」えを選び、参照元かリンク先を選択は「IPアドレスからのトラフィック」、式は「等しい」。
IPアドレスを入力し、フィルタをかけたいビューを選び「追加」をクリック。

IPアドレスが複数

フィルタは254個まで設定できます。
本店と支店などで、IPアドレスが全く異なる場合は上記の方法で複数フィルタを設定するといいでしょう。

IPアドレスが範囲の場合

192.168.1.0/24という範囲指定、つまり192.168.1.1~192.168.1.254を除外したい場合。
この範囲は正規表現で書くと^192\.168\.1\.([1-9]|[1-9][0-9]|1([0-9][0-9])|2([0-4][0-9]|5[0-4]))$になる。

フィルタを追加し、フィルタの種類を「カスタム」に(これが重要)。
「除外」をクリックし、フィルタフィールドで「IPアドレス」を選択。
フィルタパターンに
^192\.168\.1\.([1-9]|[1-9][0-9]|1([0-9][0-9])|2([0-4][0-9]|5[0-4]))$
のように正規表現を書く。
「大文字と小文字を区別」はチェック不要。
そして対象にするビューを選択。

その他GAヘルプのココとかココとか読んでくださいな。


運用ミスを減らす。javascriptでGAのイベントトラッキング。

例えば

<a href=”/page01/”>ページ1</a>
<a href=”/page02/”>ページ2</a>

こんなリスト一覧で、クリックをGAのイベントトラッキングで計測したい場合。

 <a href=”/page01/” onClick=”ga(‘send’, ‘event’, ‘category’, ‘action’, ‘page01’);”>ページ1</a>
<a href=”/page02/” onClick=”ga(‘send’, ‘event’, ‘category’, ‘action’, ‘page02’);”>ページ2</a>

こうすれば、とりあえず計測はできるはず。

ただし、ページが増えた時に

 <a href=”/page01/” onClick=”ga(‘send’, ‘event’, ‘category’, ‘action’, ‘page01’);”>ページ1</a>
<a href=”/page02/” onClick=”ga(‘send’, ‘event’, ‘category’, ‘action’, ‘page02’);”>ページ2</a>
<a href=”/page03/” onClick=”ga(‘send’, ‘event’, ‘category’, ‘action’, ‘page02‘);”>ページ3</a>

一行コピペして直す場所が何箇所もあり、ミスが発生しやすくなる。
リンク先はクリックすればミスが見つかるし、リンク文字も目で見てわかる。
しかしイベントトラッキングのjsタグは、ミスが見つかりにくい。
この例は、まさにリンク先とリンク文字はコピペの後に修正したけど、イベントトラッキングを直すのを忘れた状態。
「ページ03」のリンクをクリックすると、正常にpage03へ遷移するが、イベントトラッキングのアクションにはpage02として計測されてしまう。

こういう時は、リンクとイベントトラッキングのラベルをjavascriptで一括操作すると良い。
htmlで

 <a href=”javascript:void(0)” onClick=”ga_link(‘page01’);”>ページ1</a>
<a href=”javascript:void(0)” onClick=”ga_link(‘page02’);”>ページ2</a>

のように書いておき、javascriptで

 <script>
function ga_link(link_url){
ga(‘send’, ‘event’, ‘category’, ‘action’, ‘link_’+link_url);
location.href = link_url;
}
</script>

のように書いておけば、ga_link(引数)の引数をイベントトラッキングで計測して、さらに引数のurlにリンクすることになる。

上の例では、イベントトラッキングでは
カテゴリ:category
アクション:action
ラベル:link_page01
のように計測される。


WordPress+jQueryでイベントトラッキング

WordPressで作ったサイトのヘッダやフッタなどのリンクを、jQueryを使ってGoogle Analyticsのイベントトラッキングをする方法。

header.php、footer.phpの該当箇所にidを振る。

header.php

<li class=”header-nav-listitem”><a id =”header_link” href=”/hoge_page/” >hoge</a></li>

footer.php

<li class=”footer-listitem”><a id =”footer_link” href=”/hoge_page/ “>hoge</a></li>

functions.phpにjqueryを書く。

 function wp_event_tracking(){ ?>
<script>
jQuery(function () {
jQuery(“#header_link”).click(function () {
ga(‘send’, ‘event’, ‘hoge’, ‘click’, ‘header_hoge_’+location.pathname);
});
jQuery(“#footer_link”).click(function () {
ga(‘send’, ‘event’, ‘hoge’, ‘click’, ‘footer_hoge_’+location.pathname);
});
});
</script>
<?php }
add_action(‘wp_head’ , ‘wp_event_tracking’);

これでイベントトラッキングには
カテゴリ:hoge
アクション:click
ラベル:以下の通り

ヘッダ:header_hoge_ページ名
 例:hader_hoge_/hoge_page/
フッタ:footer_hoge_ページ名
 例:footer_hoge_/hoge_page/
みたいな感じで計測される。
(/が入るのがイヤとかだったらreplace()してください。)

これで、どのページのヘッダ、フッタから「hoge_page」へのリンクがクリックされたかが計測できる。
新規ページを作ってもOKなので、運用上のミスも発生しない。


WordPressでUniversal Analytics

今更だけど、WordpressにUniversal Analyticsのトラッキングコードを貼る方法。
Wordpress用のAnalyticsタグ追加用のプラグインとかもあるけど、一番オーソドックスな方法がこちら。

functions.phpに以下を追加する。

<?php
function wp_google_analytics(){ ?>
<script>
(function(i,s,o,g,r,a,m){i[‘GoogleAnalyticsObject’]=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,’script’,’//www.google-analytics.com/analytics.js’,’ga’);
ga(‘create’, ‘UA-xxxxxxxx-x’, ‘auto’);<!–トラッキングID UA-xxxxxxxx-xは書き換える–>
ga(‘send’, ‘pageview’);
</script>
<?php }
add_action(‘wp_head’, ‘wp_google_analytics’);

ここからfunctions.phpの一般的な話。
javascriptをfunctions.php内に貼る時は、<script></script>の範囲外にすることに注意。
上の例だと、

<?php
function hoge(){
?><!–ここまでPHP–>

<script>
<!–ここはjavascript–>
</script>

<?php }<!–ここからまたPHP–>
add_action(‘wp_head’ , ‘hoge’);

こんな感じ。

functions.phpの上のほうに「<?php」がある場合は「<?php」をつけないでOK。
また、functions.phpの一番下は「?>」で閉じない。


jQuery MobileページをGoogle Analyticsで計測する方法

jQuery Mobileで作られたAJAXマルチページは、普通にGAタグを入れただけでは計測されない。

「jQuery Mobile Google Analytics」
で検索すると色々な方法が出てくるが、私が使っているのはこのページの方法。

仮想的にページっぽく計測するなら、_trackPageviewへ
_gaq.push([‘_trackPageview’, ‘/smartphone/’+hash.substr(1)+’.html’]);
のように渡してやるといいんじゃないかと思う。

トラッキングコード入れて、すぐに「ちゃんと計測できてるかな」って調べる時に、GAの新機能リアルタイム解析が超便利。


Google Analyticsでmeta refreshリダイレクトページの計測

今日質問されたので書いておきます。

Q:Google Analyticsでmeta refreshリダイレクトしたページを計測する場合、metaタグの前にGAトラッキングコードを置かないといけないの?
A:metaタグの後ろでも大丈夫です。

以下、記述例です。

<html>
<head>
<meta http-equiv=”Refresh” content=”0;URL=/index2.html”>
<title>タイトル</title>
</head>
<script type=”text/javascript”>

var _gaq = _gaq || [];
_gaq.push([‘_setAccount’, ‘UA-xxxxxxxx-x’]);
_gaq.push([‘_trackPageview’]);

(function() {
var ga = document.createElement(‘script’); ga.type = ‘text/javascript’; ga.async = true;
ga.src = (‘https:’ == document.location.protocol ? ‘https://ssl’ : ‘http://www’) + ‘.google-analytics.com/ga.js’;
var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(ga, s);
})();

</script>
<body>
</body>
</html>