Googleアナリティクスのトラッキングコードを外部Javascriptファイルで取り込む方法

みなさん、おはようございますこんにちはこんばんは！ハルです。
今回はGoogleアナリティクストラッキングコードに関する記事です。
Googleアナリティクスのトラッキングコードを正規の通りhead内に書き込んでいる方が大半だと思います。
私もそうしていたのですが、これって外部ファイルで一括管理出来たら変更があった時に便利なのでは？って思いまして調べてみたのですが、古い情報しか出てこなくて自力で解決したので記事にしてみました。
<---------- 追記ここから ---------->
「document.write」がその後非推薦となったので、今回「document.head.appendChild」のバージョンを追記致しました。
自分のサイトで動作確認致しましたが、参考にされる際はご確認お願いします。
<---------- 追記ここまで ---------->

もくじ

• 「document.write」のバージョン
• 「document.head.appendChild」のバージョン
• 正規の方法
• まとめ

「document.write」のバージョン

外部ファイルにするJavascriptファイルのコード。

ほぼそのままです。正規のコードの1行目の「<script async src=・・・」を「document.write」でねじ込んでいます。
3行目と8行目の「UA-123456789-1」のところはダミーなのでご自分のトラッキングIDに変更するのを忘れないようにしてください。
次にhtmlファイルのコード。

1行足すだけです。
「src="/hoge/huga/hoge.js"」の部分はご自分のパスに変更してください。

「document.head.appendChild」のバージョン

外部ファイルにするJavascriptファイルのコード。

「document.write」の改良版です。
「scriptエレメント」に、正規のコード1行目の「<script async src=・・・」を、「.src」で設定して「.appendChild」で挿入しています。
そして、「.async」で非同期の読込みを反映しています。
4行目と12行目の「UA-123456789-1」のところはダミーなのでご自分のトラッキングIDに変更するのを忘れないようにしてください。
htmlファイルのコードは以前の「document.write」のバージョンと同じままで大丈夫です。

正規の方法

念の為に正規の方法も載せておきます。

説明の必要は無いと思いますが念の為にしておきます。
「UA-123456789-1」のところ2か所をご自分のトラッキングIDに変更するのみです。

まとめ

ものすごく簡単でした。
IDを変更したい時など変更の手間が省けるので皆さんも外部ファイルにしてみてはいかがでしょうか？
それでは今回はここまで。また次回更新時もお付き合い頂けるとうれしいです。
ありがとうございました！

公開年月日：2017年12月14日
更新年月日：2022年03月27日