ウェブサイトのアクセス数を把握することは、ウェブサイトの成功を左右する重要な要素です。Google Analyticsは、これを可能にする強力なツールです。
今回は、このGoogle Analyticsを外部JavaScriptファイルを通じてウェブサイトに組み込む方法を詳しく解説します。
Google Analyticsとは？
Google Analyticsは、ウェブサイトのトラフィックを分析するための無料のツールです。訪問者の数、どのページが人気か、どのようなルートでウェブサイトにたどり着いたかなど、様々なデータを提供します。この情報を利用することで、ウェブサイトの改善点を見つけたり、マーケティング戦略を練ることができます。
なぜ外部jsファイルを使用するのか？
外部jsファイルを使用する最大のメリットは、管理のしやすさです。一つのファイルを編集するだけで、サイト全体に変更を適用できます。また、ページの読み込み速度の向上にも寄与します。
ステップ1:外部jsファイルの作成
まず、head.js という名前の外部JavaScriptファイルを作成します。このファイルには、後ほどGoogle Analyticsのタグを記述します。
ステップ2:Google Analyticsタグの記述
次に、作成したhead.jsファイルに、以下のGoogle Analyticsのタグを記述します。XXXXXXXXXX はGA4タグの計測ID、111111111 はUAタグの計測IDに置き換えてください。
document.write('<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>');
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XXXXXXXXXX');
gtag('config', 'UA-111111111-1');
このコードは、Google Analyticsのライブラリを非同期で読み込み、ページビューなどの情報をGoogle Analyticsに送信します。
ステップ3:Webページにタグを組み込む
次に、各Webページのheadセクションに以下のように記述して、先ほど作成したhead.jsを読み込ませます。
<script src="パス/head.js"></script>
これで、設定は完了です。あとはウェブサイトを公開し、データがGoogle Analyticsに送信されるのを待ちます。
Google Analyticsタグを外部jsファイルとして読み込んでアクセス数を計測するデモページ
実際にどのように動作するかを見るために、以下のデモページをご覧ください。
Google Analyticsタグを外部jsファイルとして読み込んでアクセス数を計測するデモページ
まとめ
この記事では、Google Analyticsのタグを外部JavaScriptファイルを使用してウェブサイトに組み込む方法について解説しました。この方法を用いることで、ウェブサイトのトラフィックデータを効率的に収集し、分析することが可能になります。
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。
