gtag.jsでイベントトラッキングの設定方法!アマゾンアソシエイトリンクの計測方法もご紹介します!(GoogleAnalytics)

サイト内のどこがクリックされてるかなど計測するために、GoogleAnalyticsのイベントトラッキングを使って実装したのでご紹介します。

GoogleAnalyticsには種類のがあるので注意

多くの人が、GoogleAnalyticsでアクセス解析用のタグを発行してサイト内に掲載しているかと思いますが、今まで何度か発行されているタグが変わっています。

  • 従来のタグ(analytics.js)
  • 最新のタグ(gtag.js)

アクセス解析用に発行されているGoogleAnalyticsのタグの中に「gtag.js」と入ってる箇所があれば、最新のタグです。このタグによってイベントトラッキングの実装方法が異なります。

analytics.jsでイベントトラッキングの実装方法

構文

<a href="http://example.jp/" onclick="ga('send', 'event', 'カテゴリ', 'アクション', 'ラベル');">

‘カテゴリ’、’アクション’、’ラベル’の部分に任意の値を設定します。

実装例

<a href="http://example.jp/" onclick="ga('send', 'event', 'link_click', 'click', 'クリックURL');">

gtag.jsでイベントトラッキングの実装方法

構文

<a href="http://example.jp/" onclick="gtag('event', 'アクション', {'event_category' : 'カテゴリ', 'event_label' : 'ラベル');">

‘アクション’、’カテゴリ’、’ラベル’の部分に任意の値を設定します。

実装例

<a href="http://example.jp/" onclick="gtag('event', 'click', {'event_category' : 'link_click', 'event_label' : 'クリックURL');">

記事内のどのリンクがどれだけクリックされてるかを計測する用の実装サンプルです。

Amazonアソシエイトのリンククリックを計測する

サイト内のいずれかのAmazonアソシエイトリンクがクリックされた時、どの記事のどのLink(Amazon)がクリックされたかを計測できる実装サンプルをご紹介します。

※jqueryを利用していますので、別途jqueryの読み込みが必要になります。


<script type="text/javascript">
$(function(){$("a").click(function(e){
  var ahref = jQuery(this).attr('href');
  if(ahref.indexOf("www.amazon.co.jp")!=-1 && ahref.indexOf("XXXX-22")!=-1){
    var article_title = document.title;
    var link_url = $(this).attr("href");
    gtag('event', 'click', {
      'event_category' : 'amazonlink',
      'event_label' : article_title+":"+link_url
    });
  }
});});
</script>

イベントトラッキングの確認方法

GoogleAnalyticsのイベントから確認することができます。

注意事項

GoogleAnalyticsのアクセス解析用コードを以前に設置していないと、イベントトラッキングが上手く動作しないことがあるようです。

コメントを残す

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