はじめての Google Analytics。クリックイベントをカウントする。

こんにちは、昨日に引き続き Google Analytics ネタです。

はじめての Google Analytics。これさえ設定しておけば何とかなる。

昨日公開した Google Analytics の設置記事を SNS でシェアしたところ、一部の鬼畜先輩達から「設定はしてあるので、続編を待ってる!(チラッ」とか「基本設定できてる人向けの続編まだー?」とか。Google Analytics 初心者に何を書かせようとしているのか(笑)本当に優しい先輩達です。

[amazonjs asin=”484433770X” locale=”JP” title=”できる逆引き Googleアナリティクス Web解析の現場で使える実践ワザ240 ユニバーサルアナリティクス&Googleタグマネージャ対応”]

クリックイベントのカウントはけっこう簡単

資料のダウンロード数、ショッピングカートへ商品が入れられた数、色々なクリック数を知りたくなることが往々にしてあります。例えば・・・

  • オリジナルのシェアボタンを設置したはいいれど、どれくらいクリックされているのか知りたい。
  • とある資料を PDF でダウンロードできるようにウェブサイトに公開したれど、一体どれくらいダウンロードされているのか知りたい

などなど。アフェリエイトリンクへのクリック数などもカウントしたいという人は多いでしょう。

僕の例でいうと、VA Social Buzz という WordPress プラグインを公開しているんですけれど、その機能の 1 つに Facebook ボタンと Tweet ボタンが表示できるようになっています。この 2 つのボタンはただの Anchor タグで、各 SNS の投稿用 URL に URL パラメータを付けてリンクしているだけです。そのため、シェア数とかまったく分かりません(必要ないと思っているので今後も追加予定はないです)。ただし「本当にクリックされているのか」は気になるため、Google Analytics でクリックイベントをみれるようにしています。

Google Analytics 上での表示はこんな感じです。

screenshot-3

screenshot-4

大ぴらに宣伝している機能ではないですし、今後止めるかもしれないですけれど(笑)このような感じでクリック数をカウントすることができます。クリックなど、ユーザーの行動に対するイベントを Google Analytics に送信するのはけっこう簡単にできます。プログラミング不要なので、すごく簡単です。安心してください。本当に簡単です!本当だよ。

ここからの説明は、Universal Analytics を使用していることを前提に説明していきます。最近 Google Analytics に登録した人は、Universal Analytics になっているので気にしなくて大丈夫です。

Google Analytics をウェブサイトに設置すると、 ga() という JavaScript 関数(グローバル)が使用できるようになります。あなたがウェブサイトに貼り付けたトラッキングコードをよーくみると、 ga() 関数が使われているのが確認できると思います。

<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-3', 'auto');
ga('send', 'pageview');
</script>

クリック数は、この ga() 関数を使用して Google Analytics にイベントの発生を送信します。HTML を触っていると 1 度は onclick / onsubmit という属性を使用したことがあると思います。最近では、jQuery とかでクリックに対する処理をすることが多いですかね。 ga() 関数はこの onclick / onsubmit という属性内で使用します。また、 ga() 関数の使用方法は、6 つの値をセットしてあげるだけです。

では、具体的な実装例をみていきます。

クリックイベントを送信する

いきなりですが、まず以下の HTML をみてください。

<!DOCTYPE html>
<html>
<head>
<title>おれをみてくれ!</title>
<script>
// トラッキングコードが貼り付けてあると思ってください
</script>
</head>
<body>
<h1>おれをみてくれ!</h1>
<p>
<a href="http://example.com/download/example.pdf" onclick="ga( 'send', 'event', 'download', 'pdf', 'example.pdf', 1 );">みてやるよ!</a>
</p>
<body>
</html>

これは、とある即戦力になりたい男が、自分をアピールする為に色々したためた pdf ファイルを見てもらいたくて開設した、ウェブサイトの HTML ソースコードです。頭おかしいですね(笑)さて、注目していただきたいのは、 Anchor タグの onclick 属性です。 ga() 関数の簡単な使い方は、たったこれだけです。

まず、第一引数(以下:コマンド)の send は、ほぼ固定だと思ってください。第二引数(以下:ヒットタイプ)は色々ありますが、今回は event と social だけ覚えてください。重要なのは第三引数以降です。第三引数以降の値に付いて以下に示します。

引数 必須 概要
カテゴリ 文字列 はい イベントに対するカテゴリ。例えば、ダウンロード数なら download など。決まりはないでの、自分で分かりやすいようにするとよい。
アクション 文字列 はい イベントに対するアクション。例えば、Anchor がクリックされた回数なら click、ダウンロード数なら拡張子など。決まりはないでの、自分で分かりやすいようにするとよい。
ラベル 文字列 いいえ イベントアクションに対して更に分類をつけたい時に使用する。例えば、ダウンロードならダウンロードされたファイル名など。決まりはないでの、自分で分かりやすいようにするとよい。
バリュー 整数 いいえ 1 回のイベントに対して与える数値。例えば、クリック数をカウントしたい場合、1 回のクリックで 1 カウントなので、この値は 1 にするとよい。

イベント トラッキング | ウェブ向けアナリティクス(analytics.js) | Google Developers

先ほどの例の場合、onclick 属性を使用した例でしたが、もう少しだけ実用的に、jQuery を使った例を以下に示します。

( function ( $, window, document, undefined ) {
'use strict';
$( document ).on( 'ready', function () {
$( '.download' ).on( 'click', function ( event ) {
ga( 'send', 'event', 'download', 'pdf', 'example.pdf', 1 );
} );
} );
} )( window.jQuery, window, document, undefined );

こんな感じで動くと思います。単純にクリックされたら ga() 関数を呼び出すだけです。

これまでの例では、ヒットタイプは event でしたが、これを social に変更すると、Google Analytics のソーシャルインタラクションにイベント内容を送信することができます。ソーシャルインタラクションに、オリジナルで設置した Facebook へのシェアボタンがクリックされたらイベントを送信する例を以下に示します。

( function ( $, window, document, undefined ) {
'use strict';
$( document ).on( 'ready', function () {
$( '.share_button-facebook' ).on( 'click', function ( event ) {
ga( 'send', 'social', 'facebook', 'share', 'http://ecample.com/', 1 );
} );
} );
} )( window.jQuery, window, document, undefined );

もう 1 つの例として、Facebook JavaScript SDK を使用して、いいね!されたら Google Analytics にイベントを送信する例を以下に示します。

FB.Event.subscribe( 'edge.create', function ( url ) {
ga( 'send', 'social', 'facebook', 'like', url );
});

ソーシャル インタラクション | ウェブ向けアナリティクス(analytics.js) | Google Developers

Facebook JavaScript SDK を利用すれば、Facebook 公式のいいね!ボタンやシェアボタンのイベントを Google Analytics に送信できるようになります。Twitter にも JavaScript SDK はあるので、公式のツイートボタンでも同じことができます。クライアントにレポートを出す時も楽になりますね!

レポートを確認する

Google Analytics 上でのレポートの確認場所は、ヒットタイプ毎に異なります。

ヒットタイプ レポートの場所
event レポート→行動→イベント
social レポート→集客→ソーシャル→プラグイン→ソーシャルネットワークとアクション

マイレポートにこれらを追加しておくことで、レポートの作成も簡単になります。マイレポートについては、以前に書いた記事を読んでみてください。くっくるが普段使っているマイレポートのテンプレートも公開しています。

はじめての Google Analytics。これさえ設定しておけば何とかなる。

最後に

いかがでしたでしょうか。初心者なりに記事にしてみました。次回の Google Analytics ネタは未定です(笑)というのも、くっくる自身がズブの素人なので、そんなにネタもってないんですよー(笑)色々勉強したら、また記事にしたいと思います。

それでは、本日はここまで。

Google Analytics に関する記事

[amazonjs asin=”484433770X” locale=”JP” title=”できる逆引き Googleアナリティクス Web解析の現場で使える実践ワザ240 ユニバーサルアナリティクス&Googleタグマネージャ対応”]

[amazonjs asin=”4839950652″ locale=”JP” title=”頼られるWeb担当者になる! Googleウェブマスターツールの教科書”]

[amazonjs asin=”B01531HLPW” locale=”JP” title=”マーケティング/検索エンジンに強くなる Google Search Consoleの教科書”]

この記事が気に入ったら
いいね ! しよう

Twitter で

Written by くっくる

WordPressを使ったウェブサイトの構築・HTMLコーディングの受託案件を中心に埼玉県にて活動中。バイラルメディア風にFacebook pageのいいね!ボタンを設置できるVA Social Buzzをはじめ、複数のWordPressプラグインを公開している。共著書として「エンジニアのためのWordPress開発入門」がある。

View all author posts →

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください