Atsushi2022の日記

データエンジニアリングに関連する記事を投稿してます

Webトラッキング

Webトラッキング

https://it-trend.jp/marketing_automation_tool/article/458-0021

Webトラッキングとは、Webサイトを訪れたユーザーのネット上での行動を記録・追跡すること

ユーザーがどこから流入したのか、どのくらいの時間閲覧したか等がわかる

Webトラッキングの手法

https://webtan.impress.co.jp/e/2009/09/24/6386

  • Webビーコン
    • htmlに記述したimgタグかJavaScriptタグが動作して、アクセスされたデータを解析マシンに送信し、解析する
  • サーバーログ取得
    • Webサーバーに記録されたアクセスログファイルをもとに解析を行う
  • パケットキャプチャリング
    • Webサーバーに流れるトラフィックを監視し、その状況を解析マシンに送信し、解析する

Webビーコン

上記手法のうち、Webビーコンが最も一般に用いられている

Webビーコンでは以下のいずれかのタグをサイトのHTMLに貼ることで、トラッキングを行う。

事例をもとにWebトラッキングを理解する

Webサイトで行動履歴をトラッキングする事例を具体的に考えてみる。

今回は、はてなブログ(Webサイト)にトラッキングコードを埋め込み、トラッキング結果をGoogle Analytics4に送信するケースを想定する。

Webサイト(はてなブログ)⇒ 行動情報解析用サーバ(GA4)

実際にトラッキングをしたいケースといえば、ECサイトとかだと思うけれど用意できないので、上記のケースで概要を把握する。

手順はざっくりと以下の通り。②の手順はスキップしてもダイジョブ。

①のデータストリームの設定でトラッキングコード(JavaScriptのscriptタグ)が払い出される。

  1. GA4のデータストリームを設定する
  2. Googleタグマネージャーの設定
  3. はてなブログGoogleタグマネージャーを設定する

より詳細な手順は↓を参考にするとよい。

https://souiunogaii.hatenablog.com/entry/hatenablog-GA4

GA4で払い出されるトラッキングコードは次のような感じ。

<gtag.js>

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

  gtag('config', 'G-XXXXXXXXXX');
</script>

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>で外部スクリプトURIを指定している.

windowはwindowオブジェクトのことで、画面上に表示されているすべてのオブジェクトの親となるオブジェクトらしい。

https://qiita.com/mzmz__02/items/3ed731b9ed9dfb74a971

dataLayerJavaScriptにおける「配列」のこと。

https://ga4-quick.and-aaa.com/archives/1096

つまり、window.dataLayer = window.dataLayer || [];部分はdataLayerという名前の配列を作成している模様。

gtag()という関数については以下を参照すること。

https://developers.google.com/tag-platform/gtagjs/reference?hl=ja

感想

自分でアクセス解析用サーバをたてて自作のトラッキングコードをサイトに埋め込む、とかやってみたら面白そう。