AAtsushi's Blog
Security

Web Tracking

→ 日本語版を読む

Web Tracking

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

Web tracking refers to recording and tracking the online behavior of users who visit a website.

Can determine where users came from, how long they browsed, etc.

Web Tracking Methods

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

  • Web beacon
    • An img tag or JavaScript tag written in HTML operates to send accessed data to an analysis server for analysis
  • Server log acquisition
    • Analysis is performed based on access log files recorded on the web server
  • Packet capturing
    • Monitors traffic flowing to the web server, sends the status to an analysis server, and analyzes it

Web Beacon

Among the above methods, web beacons are the most commonly used.

Web beacons perform tracking by placing one of the following tags in the site's HTML:

Understanding Web Tracking Through Examples

Let's think concretely about a case of tracking behavior on a website.

This time, we'll consider the case of embedding a tracking code in Hatena Blog (a website) and sending tracking results to Google Analytics 4.

Website (Hatena Blog) ⇒ Behavior analysis server (GA4)

The case where you'd actually want to do tracking is probably for e-commerce sites, but since I can't prepare one, I'll get an overview using the above case.

The steps are roughly as follows. Step ② can be skipped.

A tracking code (JavaScript script tag) is issued during the data stream setup in step ①.

  1. Set up a GA4 data stream
  2. Set up Google Tag Manager
  3. Set up Google Tag Manager in Hatena Blog

For more detailed steps, refer to ↓:

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

The tracking code issued by GA4 looks like this:

<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> specifies the URI of an external script.

window refers to the window object, which appears to be the parent object of all objects displayed on screen.

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

dataLayer is an "array" in JavaScript.

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

In other words, the window.dataLayer = window.dataLayer || []; part appears to be creating an array named dataLayer.

For the gtag() function, refer to:

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

Thoughts

It would be interesting to try setting up my own access analysis server and embedding my own tracking code in a site.

← Back to articles