Google Analytics のトラッキングコードの記載方法

SEO対策をするうえで欠かせない作業がアクセス解析。
そのアクセス解析に欠かせないツールがGoogle Analytics(アナリティクス)です。

アナリティクスの導入はそんなに難しいことではありません。
アナリティクスのアカウントを作成し、アナリティクスが発行するトラッキングコードと呼ばれるコードを解析したいホームページのhtmlファイルに書き込むだけです。

トラッキングコードはアナリティクスの以下の画面で取得できます。

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

gtag(‘config’, ‘◯◯-◯◯◯◯◯◯◯◯◯◯’);
</script>

上記がトラッキングコードです。
（※◯◯-◯◯◯◯◯◯◯◯◯◯にはIDが入ります。）

 

では、判明したトラッキングコードを記載していきましょう。

多くのサイトは全てのhtmlファイルのhead要素に記載。と説明しています。
ですが、ページ数が100を超えるような場合それだけで大変な作業となってしまいます。

大変な作業を回避するために、便利な方法をお教えします。

ホームページでは、各ページのhtmlが共通のJavaScriptファイルを参照している場合が多いです。

<script src=”◯◯◯◯◯◯◯◯.js”></script>

各ページのhead要素内に上記のような記載があれば、上記ファイルにトラッキングコードを挿入するだけで、
全てのhtmlファイルにトラッキングコードを記載するのと同じ対処が可能です。

jsファイルに記載する内容は下記の通りになります。

var _gaq = _gaq || [];
_gaq.push([‘_setAccount’, ‘◯◯-◯◯◯◯◯◯◯◯◯◯’]);
_gaq.push([‘_trackPageview’]);

(function() {
var ga = document.createElement(‘script’); ga.type =
‘text/javascript’; ga.async = true;
ga.src = (‘https:’ == document.location.protocol ? ‘https://ssl’ :
‘http://www’) + ‘.google-analytics.com/ga.js‘;
var s = document.getElementsByTagName(‘script’)[0];
s.parentNode.insertBefore(ga, s);
})();

※◯◯-◯◯◯◯◯◯◯◯◯◯にはIDが入ります。

上記方法であれば、あらかじめトラッキングコードのファイルを作成しておき、
各htmlファイルをそのjsコードを参照する作りにすることで、ID変更等にも簡単に対応できるようになります。