【Googleアナリティクス】イベントデータが取れてなかった！？ｶﾞ━━(;ﾟДﾟ)━━ﾝ!!
投稿日:2021/7/14 更新:2021/7/14 コメント 0件 サイト運営 アナリティクス, イベント, ダウンロード
久々にやらかしました。
今年の６月初めに「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');
関連カテゴリー
