<% var g = (x && x.ga4) || null; var T = (g && g.totals) || {}; var D = (g && g.deltas) || {}; var bk = (x && x.buckets) || null; var bh = (x && x.backlinkHistory) || []; var n = function (v) { return (v === null || v === undefined || v === '') ? '—' : v; }; var big = function (v) { return (v === null || v === undefined) ? '—' : Number(v).toLocaleString('en-US'); }; function chg(v, good) { if (v === null || v === undefined) return ''; if (Math.abs(v) < 0.05) return ' 0%'; var up = v > 0; var positive = (good === 'down') ? !up : up; return '' + (up ? '▲' : '▼') + Math.abs(v) + '%'; } function pct(v) { return (v === null || v === undefined) ? '—' : v + '%'; } function poly2(rows, key, max, w, h) { var nn = rows.length; if (nn < 2 || !max) return ''; return rows.map(function (r, i) { var px = 6 + i * ((w - 12) / (nn - 1)); var py = h - 8 - ((r[key] || 0) / max) * (h - 20); return px.toFixed(0) + ',' + py.toFixed(0); }).join(' '); } var dNow = (g && g.daily) || [], dPrev = (g && g.dailyPrev) || []; var dMax = Math.max.apply(null, dNow.concat(dPrev).map(function (r) { return r.sessions || 0; }).concat([1])); var ga4Date = function (s) { s = String(s || ''); if (!/^\d{8}$/.test(s)) return null; return new Date(Number(s.slice(0, 4)), Number(s.slice(4, 6)) - 1, Number(s.slice(6, 8))); }; var ga4Label = function (s) { var dt = ga4Date(s); return dt ? dt.toLocaleDateString('en-GB', { day: 'numeric', month: 'short' }) : ''; }; var trafW = 680, trafH = 150; var trafX = function (i, nn) { return nn < 2 ? 6 : 6 + i * ((trafW - 12) / (nn - 1)); }; var trafY = function (v) { return dMax ? (trafH - 8 - ((v || 0) / dMax) * (trafH - 20)) : (trafH - 8); }; var trafN = dNow.length; var trafTickIdx = []; if (trafN) { var _want = Math.min(5, trafN); var _raw = []; for (var _t = 0; _t < _want; _t++) _raw.push(Math.round(_t * (trafN - 1) / Math.max(1, _want - 1))); _raw = _raw.filter(function (v, i, a) { return a.indexOf(v) === i; }); var _seen = {}; _raw.forEach(function (idx) { var lbl = ga4Label(dNow[idx].d); var isEdge = (idx === 0 || idx === trafN - 1); if (isEdge || !_seen[lbl]) { trafTickIdx.push(idx); _seen[lbl] = true; } }); } var trafChartPts = dNow.map(function (r, i) { var rows = [{ k: 'This period', v: (r.sessions || 0).toLocaleString('en-US'), y: Math.round(trafY(r.sessions)), c: 'var(--teal)', d: i === 0 ? null : (r.sessions || 0) - (dNow[i - 1].sessions || 0) }]; if (dPrev[i]) { rows.push({ k: 'Previous period (' + ga4Label(dPrev[i].d) + ')', v: (dPrev[i].sessions || 0).toLocaleString('en-US'), y: Math.round(trafY(dPrev[i].sessions)), c: 'var(--muted-2)' }); } return { x: Math.round(trafX(i, trafN)), label: ga4Label(r.d), rows: rows }; }); var conv = (g && g.conversions) || []; var cMax = Math.max.apply(null, conv.map(function (r) { return Math.max(r.keyEvents || 0, 0); }).concat([1])); var convH = 120; var convX = function (i, nn) { return nn < 2 ? 6 : 6 + i * ((trafW - 12) / (nn - 1)); }; var convY = function (v) { return cMax ? (convH - 8 - ((v || 0) / cMax) * (convH - 20)) : (convH - 8); }; var convN = conv.length; var convTickIdx = []; if (convN) { var _cWant = Math.min(5, convN); var _cRaw = []; for (var _ct = 0; _ct < _cWant; _ct++) _cRaw.push(Math.round(_ct * (convN - 1) / Math.max(1, _cWant - 1))); _cRaw = _cRaw.filter(function (v, i, a) { return a.indexOf(v) === i; }); var _cSeen = {}; _cRaw.forEach(function (idx) { var lbl = ga4Label(conv[idx].d); var isEdge = (idx === 0 || idx === convN - 1); if (isEdge || !_cSeen[lbl]) { convTickIdx.push(idx); _cSeen[lbl] = true; } }); } var convChartPts = conv.map(function (r, i) { return { x: Math.round(convX(i, convN)), label: ga4Label(r.d), rows: [{ k: 'Key events', v: (r.keyEvents || 0).toLocaleString('en-US'), y: Math.round(convY(r.keyEvents)), c: 'var(--navy)', d: i === 0 ? null : (r.keyEvents || 0) - (conv[i - 1].keyEvents || 0) }] }; }); function donut(rows, keyName) { var totalV = rows.reduce(function (s, r) { return s + (r.sessions || 0); }, 0); if (!totalV) return []; var acc = 0, R = 54, C = 2 * Math.PI * R; var COLORS = ['#1a73e8', '#12b5cb', '#e52592', '#f9ab00', '#ff8168', '#7c5cd6', '#0f9d58', '#9aa0a6', '#5f6368']; return rows.slice(0, 9).map(function (r, i) { var share = (r.sessions || 0) / totalV; var seg = { name: r[keyName] || r.name, share: +(share * 100).toFixed(1), color: COLORS[i % COLORS.length], dash: (share * C).toFixed(2) + ' ' + C.toFixed(2), offset: (-acc * C).toFixed(2) }; acc += share; return seg; }); } var chanDonut = donut((g && g.channels) || [], 'name'); var srcDonut = donut((g && g.sources) || [], 'name'); %>

Traffic overview: what's changed?

<% if (g) { %>GA4 · <%= g.period.days %> days to <%= h.date(g.period.end) %>, against the <%= g.period.days %> before<% } else { %>GA4<% } %>

<% if (!g) { %>

Fills in from GA4 on the next <% if (locals.showStaff) { %>Sync now<% } else { %>sync<% } %>.

<% } else { %>

Sessions

<%= big(T.sessions) %> <%- chg(D.sessions) %>

Users

<%= big(T.users) %> <%- chg(D.users) %>

New users

<%= big(T.newUsers) %> <%- chg(D.newUsers) %>

Bounce rate

<%= pct(T.bounceRate) %> <%- chg(D.bounceRate, 'down') %>

Events / session

<%= n(T.eventsPerSession) %> <%- chg(D.eventsPerSession) %>

Avg. session

<%= n(T.avgDuration) %> <%- chg(D.avgDuration) %>

<% if (dNow.length >= 2) { %>

This period Previous period

<% } %>

How does the traffic convert?

<%= g.keyEventMetric === 'keyEvents' ? 'key events' : 'conversions' %>

Key events

<%= big(T.keyEvents) %> <%- chg(D.keyEvents) %>

Event count

<%= big(T.eventCount) %> <%- chg(D.eventCount) %>

Engagement rate

<%= pct(T.engagementRate) %> <%- chg(D.engagementRate) %>

<% if (conv.length >= 2) { %>

<% } else { %>

No daily breakdown yet. It appears once GA4 has more than one day in the window.

<% } %>

Organic compared to other channels

vs the previous <%= g.period.days %> days

<% if (!(g.channels || []).length) { %>

GA4 returned no channel rows for this window.

<% } else { %> <% g.channels.forEach(function(c){ %> <% }) %>

Traffic source	Sessions	Engagement rate	Event count	Views / session
<%= c.name %>	<%= big(c.sessions) %> <%- chg(c.dSessions) %>	<%= pct(c.engagementRate) %> <%- chg(c.dEngagement) %>	<%= big(c.eventCount) %> <%- chg(c.dEvents) %>	<%= n(c.viewsPerSession) %> <%- chg(c.dViews) %>

<% } %>

<% } %> <% var _geo = g && (g.geo || g.us); var _geoOk = g && (g.geo ? g.geoAvailable : g.usAvailable); var _mkt = (g && g.market) || (g && g.us ? { name: 'United States', iso: 'US', chosen: true } : null); var _mktName = _mkt ? _mkt.name : 'Market'; %> <% if (g && (_geo || g.countries)) { %>

<%= _mktName %> traffic

sessions from <%= _mktName %><% if (_mkt && _mkt.chosen === false) { %> (no market set yet)<% } %>

<% if (!_geoOk) { %>

GA4 wouldn't answer the country-filtered query, so this couldn't be measured.

<% } else { var u = _geo || {}; %>

Sessions

<%= big(u.sessions) %> <%- chg(u.dSessions) %>

Users

<%= big(u.users) %> <%- chg(u.dUsers) %>

Engagement

<%= pct(u.engagementRate) %> <%- chg(u.dEngagement) %>

Key events

<%= big(u.keyEvents) %> <%- chg(u.dKeyEvents) %>

<% if ((u.landingPages || []).length) { %>

Landing pages

<% u.landingPages.forEach(function(lp){ %> <% }) %>

Page	Sessions	Engagement	Key events
<%= lp.p %>	<%= big(lp.sessions) %>	<%= pct(lp.engagementRate) %>	<%= big(lp.keyEvents) %>

<% } %>

<% if ((u.devices || []).length) { %>

<%- include('donut', { rows: u.devices, title: 'By device', change: true, donutChg: chg }) %>

<% } %> <% if ((u.channels || []).length) { %>

<%- include('donut', { rows: u.channels, title: 'By channel', change: true, donutChg: chg }) %>

<% } %>

<% } %> <% if ((g.countries || []).length) { %> <% var _ctryHelp = 'For context on how much of the above ' + h.esc(_mktName) + ' is.' + ((locals.marketExtras && marketExtras.length) ? ' This client also has ' + h.esc(marketExtras.map(function (m) { return m.name; }).join(', ')) + ' as a market, but the figures above cover ' + h.esc(_mktName) + ' only (one country per filtered query).' : ''); %>

Top countries<%- h.ihelp('Top countries', _ctryHelp) %>

<% g.countries.forEach(function(ct){ %> <% }) %>

Country	Sessions	Change
<%= ct.name %>	<%= big(ct.sessions) %>	<%- chg(ct.dSessions) \|\| '—' %>

<% } %>