【Googleアナリティクス】イベントデータが取れてなかった!?ガ━━(;゚Д゚)━━ン!!

投稿日:2021/7/14 更新:2021/7/14 コメント 0件 サイト運営 , ,


久々にやらかしました。

今年の6月初めに「edius…?」で使用している自作ワードプレステーマを大幅に修正して置き換えたんですが、その際にミスってGoogleアナリティスクのイベントデータ(ダウンロード数)が二日前までまったく取れてませんでした。

 

 

イベントデータが取得できなかった原因

トラッキングコードを取得するページに「gtag.js(グローバル サイトタグ)」しかなかったのでこれでいいんだろうと<head>タグに貼っていました。

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXX-Y"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-XXXXX-Y');
</script>

そしてダウンロードリンクは下記のようなショートコードを作成し、URLとファイル名を記載します。

ダウンロードリンクを生成するショートコード → [ download url=■■■ filename=●●● size=8.0KB ]

すると最終的にはPHPで下記のようなリンクタグが生成されます。

<a href="■■■" class="download_icon" onclick="ga('send','event','ダウンロードボタン','●●●');">●●● 8.0KB</a>

ただ、この書き方は「analytics.js(ユニバーサルサイトタグ)」用のものなので、gtag.jsのトラッキングコードでイベントデータを正しく取るには下記のように「gtag.js」用の書き方をしなければなりませんでした。

<a href="■■■" class="download_icon" onclick="gtag('event','download',{'event_category': 'ダウンロードボタン','event_label': '●●●'});">●●●</a>

「gtag.js」に変更すると既存のダウンロードリンクのほかにテーマやショートコードまで修正する必要があるので「analytics.js」に戻すことにしました。「analytics.js」に戻すには下記のトラッキングコードを貼ればイケます。

<!-- 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','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->

非同期でJavaScriptを読み込みたい場合は下記のように記載すればいいみたいです。実際にはこちらのコードを貼りました。

<!-- Google Analytics -->
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
<!-- End Google Analytics -->

非同期のトラッキングコードを貼り直したら元通りにダウンロード回数を取得できるようになりました。

 

 




ショートコードメモ

「download analytics.js用」のショートコードでURLを記載しないと利用できない仕様にしています。

functions.phpに以下のPHPコードをを記載して利用。

ショートコードは<pre>タグ内でも動作するのでカッコの前後に半角スペースを入れています。

[ download url= filename= size= ]
// ショートコード download analytics.js用
function download_callback($atts) {
  extract(shortcode_atts(array(
    'url'      => '',  // ダウンロードリンク ※必須
    'filename' => '',  // ファイル名
    'size'     => '',  // サイズ
    ), $atts));
  $output = '';
  if($url){
    $output = sprintf(
      '<a href="%s" class="download_icon" onclick="ga(\'send\',\'event\',\'download_btn\',\'%s\');">' . "\n" .
       '%s %s</a>',
      $url,       // 1番目の%s
      $filename,  // 2番目の%s
      $filename,  // 3番目の%s
      $size       // 4番目の%s
    );
  }else{
    $output = 'ダウンロードURLが記載されていません。';
  }
  return $output;
}
add_shortcode('download', 'download_callback');

ショートコード gtag.js用 

[ download2 url= filename= size= ]
// ショートコード download gtag.js用
function download_gtag($atts) {
  extract(shortcode_atts(array(
    'url'      => '',  // ダウンロードリンク ※必須
    'filename' => '',  // ファイル名
    'size'     => '',  // サイズ
    ), $atts));
  $output = '';
  if($url){
    $output = sprintf(
      '<a href="%s" class="download_icon" onclick="gtag(\'event\',\'download_btn\',{\'event_category\':\'download_button\',\'event_lavel\':\'%s\'});">' . "\n" .
       '%s </a>[%s]',
      $url,       // 1番目の%s
      $filename,  // 2番目の%s
      $filename,  // 3番目の%s
      $size       // 4番目の%s
    );
  }else{
    $output = 'ダウンロードURLが記載されていません。';
  }
  return $output;
}
add_shortcode('download2', 'download_gtag');

 

サイトに analytics.js を追加する

 

コメントを残す

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