アクセス解析

アメブロでGoogleアナリティクスのイベントトラッキングを実装する方法

一回つまづいたアメブロでのGoogleアナリティクスでイベントトラッキングする方法をご紹介します。
あわせて、基本的なアメブロのGoogleアナリティクス計測設定もご紹介します。

[aside type="warning"]
現在は、通常通り設定することが可能となっています。
もし設定方法がわからなければ、ココナラでお手伝いしています。
ココナラ：Googleアナリティクス、タグマネージャ、サーチコンソールのお手伝い
[/aside]

アメブロではイベントトラッキングが利用できない！？

記事エリアには、onclick属性を利用することができませんでした。
このため、Aタグをクリックした際に発動させるイベントトラッキングが利用できません。

jQueryを使ったイベントトラッキング方法

jQueryのクリック時のスクリプト発動を利用して、イベントトラッキングを実現しました。

設定手順

「設定・管理＞プラグインの追加」を開きます。

Image

フリープラグインに以下のコードを追加します。
・Googleアナリティクスのトラッキングコード　← このコードによりGooogleアナリティクスで計測可能となります。
・jQueryのライブラリへのリンク（Google提供）
・リンククリック時に動作させるためのjQueryスクリプト

Image

以下のコードを追加します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!-- Googleアナリティクスコード -->
<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-XX', 'auto');
  ga('send', 'pageview');
 
</script>
<!-- jQueryライブラリリンク -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- jQueryスクリプト -->
<script type="text/javascript">
  jQuery(function() {
    jQuery("a").click(function(e) {
      var ahref = jQuery(this).attr('glabel');
      if(ahref.length > 0 ) {
        ga('send','event','PDFLink',location.pathname,ahref);
      }
    });
  });
</script>

追加後は、「設定・管理＞配置設定」にてサイドバー設定の「フリープラグイン」を使用する機能に追加してください。

Image

計測したいリンク（Aタグ部分）を以下のように変更します。

変更前

1
<a href="xxxx.pdf">PDFはここからダウンロード</a>

変更後

1
<a href="xxxx.pdf" glabel="PDFダウンロード">PDFはここからダウンロード</a>

これにより下記の項目が計測されます。

  • イベントカテゴリ【固定】：PDFLink
  • イベントアクション【変数】：（クリックしたページのページパス）
  • イベントラベル【変数】：（glabelに記述した文字列）

設定後に記事や設定を保存して、該当のイベントをクリックします。

Image

Googleアナリティクスのリアルタイム計測で確認

無事に計測されていることを確認できました。

Image

-アクセス解析
-, , , ,

S