Feed The Beast!
Running GA4 without gtag.js using ssGTM + walker.js
Markus Baersch
Why Not GTAG.JS?
gtag.js
some issues
Source: in client-side setup likely to
be blocked by modern browsers
Heavy: does is all: GA, Ads, Optimize,
Badges and whatever
Complexity: Much stuff you might
not want
Control: let me define what is
“engaged”!
Consent: Consent Mode is a joke!
What to use (when running your own
endpoint for more than just GA4)?
gtag.js
… is odd!
Session Handling & More:
● control over “first_visit” and
“session_start”
● browser knows what is a
conversion, a referral exclusion…
● no way to hide your
measurement id
● much “serverside-stuff” has to be
handled by the browser
● just “sending hits” is not enough
● GA4 Measurement Protocol is
no replacement
● tasks: knowing goals, send
created events, track time…
● ssGTM “sendPixelFromBrowser”
● (batching)
gtag.js
why replacing it is hard
⛪
🙏?
Options:
● ga4mp.dev by David Vallejo (->
ssGTM)
● Build your own format and send
to own endpoint
● Use existing tools like CDPs,
Tealium
But:
● Blocking might still be a
problem
● Costs?
● Control?
Alternatives exist!
A perfect fit?
GA4MP
✓ allows using own endpoint
(✓) creates gtag.js like events
❌similar “control level” to gtag.js
if used with GA4 standard
clients & tags on ssGTM
-> build your own client
Feeding GA4 with walker.js
Open source: walker.js is a maintained
repo on GitHub
(Can) have all data you need: there
are timestamps, timings, hit
numbers…
https://github.com/elbwalker/walker.js
elbwalker
open source event tracker
Tagging
uses a command / event queue called
“elbLayer” (per default)
scans DOM for data-elb attributes and
builds events and parameters
alternatively push events to elbLayer
manually via JavaScript
can send events to several destinations
Destinations are consent sensitive
(walker.js can handle consent)
https://github.com/elbwalker/sgtm-client-template/tree/main/example
events have an “open” structure to contain
default attributes, custom attributes, session
state, user information, references… or
whatever
Send example:
elb('page view',
{id: '/test/virtual/path1',
title: 'Virtual Page 1'},
'click',
{some_property: 14}
);
Events
Session Handling
GA4 wants session handling
(simple) example…
- is only active if consent is
present
- uses localStorage /
sessionStorage - which is only
possible on a single domain
AND host
elb("walker user",
{hash: sD.sessionId,
device: sD.clientId});
Sending Stuff (1): walker.js Destinations
Every destination can handle events individually. We use it to send data to a ssGTM endpoint
Sending Stuff (2): Some Tips
Try beacons, then AJAX, then
an image pixel as last fallback
…and make sure that your
endpoint looks for get
parameters.
send events incl. consent
information to a custom
endpoint and resolve consent
there
Endpoints
Use ssGTM and translate walker events to ssGTM event model
trigger / fire any tags as if gtag.js had sent the requests
or build your own in Node, PHP or whatever and forward events to GA4
- Remember: CNAME is not an option
- cloud edge endpoints actually are an option ;)
experimental: use worker for receiving walker events
forward (few data) to GA4 using GAMP V2
think: add full event to a D1 cloud database ;)
Or build your endpoint as
- AWS Lambda,
- GCP Cloud Function or
- Azure Function
- in your local cloud / CDN architecture
Cloudflare Worker
use custom client for walker events
basic example and (beta) client template
available on Github:
github.com/elbwalker/sgtm-client-template
-> fork and build what you need (if you like)
ssGTM Example
send data to GA4 using
standard tag
enrich server-side
dimensions
add debug flag for better
debugging (kill before
publishing ;))
ssGTM Example
… or send data
(additionally or exclusive)
to Piwik PRO, Matomo…
no GA consent = no
tracking (but still
measurement?)
-> send directly to
BigQuery as event-level
raw data
ssGTM Example
markus-baersch.de/walker2bq
Demo
sending events from demo
HTML page in a browser
to ssGTM + forwarding to
GA4
Final Tipps
send base64 coded payload
… or even build your own
coding (or just do rot13 :))
Keeping your own format
makes you (somewhat)
independent
remember: a tracking server
has to handle a lot of stuff. Do
not use your website server
(unless you have low traffic
like me ;))
Can you see it?
Done!
Questions?
Game On!
download and play:
Client and Example Code:
github.com/elbwalker
Order:
markus-baersch.de/gtmbook
markus-baersch.de/walker2bq

Running GA4 without gtag.js using ssGTM and elbwalker

  • 1.
    Feed The Beast! RunningGA4 without gtag.js using ssGTM + walker.js Markus Baersch
  • 2.
  • 3.
    gtag.js some issues Source: inclient-side setup likely to be blocked by modern browsers Heavy: does is all: GA, Ads, Optimize, Badges and whatever Complexity: Much stuff you might not want Control: let me define what is “engaged”! Consent: Consent Mode is a joke! What to use (when running your own endpoint for more than just GA4)?
  • 4.
    gtag.js … is odd! SessionHandling & More: ● control over “first_visit” and “session_start” ● browser knows what is a conversion, a referral exclusion… ● no way to hide your measurement id ● much “serverside-stuff” has to be handled by the browser
  • 5.
    ● just “sendinghits” is not enough ● GA4 Measurement Protocol is no replacement ● tasks: knowing goals, send created events, track time… ● ssGTM “sendPixelFromBrowser” ● (batching) gtag.js why replacing it is hard
  • 6.
  • 7.
    Options: ● ga4mp.dev byDavid Vallejo (-> ssGTM) ● Build your own format and send to own endpoint ● Use existing tools like CDPs, Tealium But: ● Blocking might still be a problem ● Costs? ● Control? Alternatives exist! A perfect fit?
  • 8.
    GA4MP ✓ allows usingown endpoint (✓) creates gtag.js like events ❌similar “control level” to gtag.js if used with GA4 standard clients & tags on ssGTM -> build your own client
  • 9.
  • 10.
    Open source: walker.jsis a maintained repo on GitHub (Can) have all data you need: there are timestamps, timings, hit numbers… https://github.com/elbwalker/walker.js elbwalker open source event tracker
  • 11.
    Tagging uses a command/ event queue called “elbLayer” (per default) scans DOM for data-elb attributes and builds events and parameters alternatively push events to elbLayer manually via JavaScript can send events to several destinations Destinations are consent sensitive (walker.js can handle consent) https://github.com/elbwalker/sgtm-client-template/tree/main/example
  • 12.
    events have an“open” structure to contain default attributes, custom attributes, session state, user information, references… or whatever Send example: elb('page view', {id: '/test/virtual/path1', title: 'Virtual Page 1'}, 'click', {some_property: 14} ); Events
  • 13.
    Session Handling GA4 wantssession handling (simple) example… - is only active if consent is present - uses localStorage / sessionStorage - which is only possible on a single domain AND host elb("walker user", {hash: sD.sessionId, device: sD.clientId});
  • 14.
    Sending Stuff (1):walker.js Destinations Every destination can handle events individually. We use it to send data to a ssGTM endpoint
  • 15.
    Sending Stuff (2):Some Tips Try beacons, then AJAX, then an image pixel as last fallback …and make sure that your endpoint looks for get parameters. send events incl. consent information to a custom endpoint and resolve consent there
  • 16.
    Endpoints Use ssGTM andtranslate walker events to ssGTM event model trigger / fire any tags as if gtag.js had sent the requests or build your own in Node, PHP or whatever and forward events to GA4 - Remember: CNAME is not an option - cloud edge endpoints actually are an option ;)
  • 17.
    experimental: use workerfor receiving walker events forward (few data) to GA4 using GAMP V2 think: add full event to a D1 cloud database ;) Or build your endpoint as - AWS Lambda, - GCP Cloud Function or - Azure Function - in your local cloud / CDN architecture Cloudflare Worker
  • 18.
    use custom clientfor walker events basic example and (beta) client template available on Github: github.com/elbwalker/sgtm-client-template -> fork and build what you need (if you like) ssGTM Example
  • 19.
    send data toGA4 using standard tag enrich server-side dimensions add debug flag for better debugging (kill before publishing ;)) ssGTM Example
  • 20.
    … or senddata (additionally or exclusive) to Piwik PRO, Matomo… no GA consent = no tracking (but still measurement?) -> send directly to BigQuery as event-level raw data ssGTM Example markus-baersch.de/walker2bq
  • 21.
    Demo sending events fromdemo HTML page in a browser to ssGTM + forwarding to GA4
  • 22.
    Final Tipps send base64coded payload … or even build your own coding (or just do rot13 :)) Keeping your own format makes you (somewhat) independent remember: a tracking server has to handle a lot of stuff. Do not use your website server (unless you have low traffic like me ;))
  • 23.
  • 24.
  • 25.
    Game On! download andplay: Client and Example Code: github.com/elbwalker Order: markus-baersch.de/gtmbook markus-baersch.de/walker2bq

Editor's Notes

  • #2 Some kind of a “gtag.js - rant”: Is gtag.js really the best way to collect events in the browser? Why is gtag.js in general odd and what are the features that are used to feed GA4 with data? We will take a look at what gtag.js does, what alternative ways for data capturing already exist and how an individual replacement can be built.
  • #3 https://www.flaticon.com/