Skip to content

Commit be10b23

Browse files
tunethewebtunetheweb
authored
More GA4 changes (#3448)
* More GA4 changes * Report report-uri as causing tests to fail as over monthly limit * Similar changes to httparchive.org * Linting
1 parent 370378e commit be10b23

6 files changed

Lines changed: 627 additions & 26 deletions

File tree

‎src/server/__init__.py‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,6 @@ def add_header(response):
7878
talisman = Talisman(
7979
app,
8080
content_security_policy=csp.csp,
81-
content_security_policy_report_uri="https://httparchive.report-uri.com/r/d/csp/enforce",
8281
content_security_policy_nonce_in=["script-src", "style-src"],
8382
feature_policy=feature_policy.feature_policy,
8483
)

‎src/static/js/send-web-vitals.js‎

Lines changed: 65 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -2,26 +2,56 @@ function sendWebVitals() {
22

33
function sendWebVitalsGAEvents({name, delta, id, attribution, navigationType}) {
44

5-
let webVitalInfo = '(not set)';
5+
let overrides = {};
66

77
switch (name) {
88
case 'CLS':
9-
webVitalInfo = attribution.largestShiftTarget;
9+
overrides = {
10+
debug_time: attribution.largestShiftTime,
11+
debug_load_state: attribution.loadState,
12+
debug_target: attribution.largestShiftTarget || '(not set)',
13+
};
14+
break;
15+
case 'FCP':
16+
overrides = {
17+
debug_time_to_first_byte: attribution.timeToFirstByte,
18+
debug_first_byte_to_fcp: attribution.firstByteToFCP,
19+
debug_load_state: attribution.loadState,
20+
debug_target: attribution.loadState || '(not set)',
21+
};
1022
break;
1123
case 'FID':
12-
webVitalInfo = attribution.eventTarget;
24+
case 'INP':
25+
overrides = {
26+
debug_event: attribution.eventType,
27+
debug_time: Math.round(attribution.eventTime),
28+
debug_load_state: attribution.loadState,
29+
debug_target: attribution.eventTarget || '(not set)',
30+
};
31+
if (!attribution.eventEntry) {
32+
break;
33+
}
34+
overrides.debug_interaction_delay = Math.round(attribution.eventEntry.processingStart - attribution.eventEntry.startTime);
35+
overrides.debug_processing_time = Math.round(attribution.eventEntry.processingEnd - attribution.eventEntry.processingStart);
36+
overrides.debug_presentation_delay = Math.round(attribution.eventEntry.duration + attribution.eventEntry.startTime - attribution.eventEntry.processingEnd);
1337
break;
1438
case 'LCP':
15-
webVitalInfo = attribution.element;
39+
overrides = {
40+
debug_url: attribution.url,
41+
debug_time_to_first_byte: attribution.timeToFirstByte,
42+
debug_resource_load_delay: attribution.resourceLoadDelay,
43+
debug_resource_load_time: attribution.resourceLoadTime,
44+
debug_element_render_delay: attribution.elementRenderDelay,
45+
debug_target: attribution.element || '(not set)',
46+
};
1647
break;
1748
case 'TTFB':
18-
webVitalInfo = attribution.connectionTime;
19-
break;
20-
case 'FCP':
21-
webVitalInfo = attribution.firstByteToFCP;
22-
break;
23-
case 'INP':
24-
webVitalInfo = attribution.eventTarget;
49+
overrides = {
50+
debug_waiting_time: attribution.waitingTime,
51+
debug_dns_time: attribution.dnsTime,
52+
debug_connection_time: attribution.connectionTime,
53+
debug_request_time: attribution.requestTime,
54+
};
2555
break;
2656
}
2757

@@ -49,21 +79,31 @@ function sendWebVitals() {
4979
prefersColorScheme = 'not supported';
5080
}
5181

52-
gtag('event', name, {
53-
event_category: 'Web Vitals',
54-
value: Math.round(name === 'CLS' ? delta * 1000 : delta),
55-
event_label: id,
56-
non_interaction: true,
82+
gtag('event', name, Object.assign(
83+
{
84+
event_category: 'Web Vitals',
85+
value: Math.round(name === 'CLS' ? delta * 1000 : delta),
86+
event_label: id,
87+
non_interaction: true,
88+
89+
// See: https://web.dev/debug-web-vitals-in-the-field/
90+
dimension1: overrides.debug_target,
91+
dimension2: effectiveType,
92+
dimension3: dataSaver,
93+
dimension4: deviceMemory,
94+
dimension5: prefersReducedMotion,
95+
dimension6: prefersColorScheme,
96+
dimension7: navigationType,
97+
//GA4
98+
effective_type: effectiveType,
99+
data_saver: dataSaver,
100+
device_memory: deviceMemory,
101+
prefers_reduced_motion: prefersReducedMotion,
102+
prefers_color_scheme: prefersColorScheme,
103+
navigation_type: navigationType,
104+
}
105+
), overrides);
57106

58-
// See: https://web.dev/debug-web-vitals-in-the-field/
59-
dimension1: webVitalInfo,
60-
dimension2: effectiveType,
61-
dimension3: dataSaver,
62-
dimension4: deviceMemory,
63-
dimension5: prefersReducedMotion,
64-
dimension6: prefersColorScheme,
65-
dimension7: navigationType,
66-
});
67107
}
68108

69109
// As the web-vitals script and this script is set with defer in order, so it should be loaded

‎src/templates/en/2020/stories/content_distribution.html‎

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1789,6 +1789,147 @@
17891789
}
17901790
</script>
17911791
</amp-analytics>
1792+
<amp-analytics type="gtag" data-credentials="include" class="i-amphtml-layout-fixed i-amphtml-layout-size-defined pixel" i-amphtml-layout="fixed">
1793+
<script type="application/json">
1794+
{
1795+
"vars": {
1796+
"gtag_id": "G-PQ5N2MZG5M",
1797+
"config": {
1798+
"G-PQ5N2MZG5M": {
1799+
"groups": "default"
1800+
}
1801+
}
1802+
},
1803+
"triggers": {
1804+
"storyProgress": {
1805+
"on": "story-page-visible",
1806+
"request": "event",
1807+
"vars": {
1808+
"event_name": "custom",
1809+
"event_action": "story_progress",
1810+
"event_category": "${title}",
1811+
"event_label": "${storyPageIndex}",
1812+
"event_value": "${storyProgress}",
1813+
"send_to": "G-PQ5N2MZG5M"
1814+
}
1815+
},
1816+
"storyEnd": {
1817+
"on": "story-last-page-visible",
1818+
"request": "event",
1819+
"vars": {
1820+
"event_name": "custom",
1821+
"event_action": "story_complete",
1822+
"event_category": "${title}",
1823+
"event_label": "${storyPageCount}",
1824+
"send_to": "G-PQ5N2MZG5M"
1825+
}
1826+
},
1827+
"trackFocusState": {
1828+
"on": "story-focus",
1829+
"tagName": "a",
1830+
"request": "click ",
1831+
"vars": {
1832+
"event_name": "custom",
1833+
"event_action": "story_focus",
1834+
"event_category": "${title}",
1835+
"send_to": "G-PQ5N2MZG5M"
1836+
}
1837+
},
1838+
"trackClickThrough": {
1839+
"on": "story-click-through",
1840+
"tagName": "a",
1841+
"request": "click ",
1842+
"vars": {
1843+
"event_name": "custom",
1844+
"event_action": "story_click_through",
1845+
"event_category": "${title}",
1846+
"send_to": "G-PQ5N2MZG5M"
1847+
}
1848+
},
1849+
"storyOpen": {
1850+
"on": "story-open",
1851+
"request": "event",
1852+
"vars": {
1853+
"event_name": "custom",
1854+
"event_action": "story_open",
1855+
"event_category": "${title}",
1856+
"send_to": "G-PQ5N2MZG5M"
1857+
}
1858+
},
1859+
"storyClose": {
1860+
"on": "story-close",
1861+
"request": "event",
1862+
"vars": {
1863+
"event_name": "custom",
1864+
"event_action": "story_close",
1865+
"event_category": "${title}",
1866+
"send_to": "G-PQ5N2MZG5M"
1867+
}
1868+
},
1869+
"audioMuted": {
1870+
"on": "story-audio-muted",
1871+
"request": "event",
1872+
"vars": {
1873+
"event_name": "custom",
1874+
"event_action": "story_audio_muted",
1875+
"event_category": "${title}",
1876+
"send_to": "G-PQ5N2MZG5M"
1877+
}
1878+
},
1879+
"audioUnmuted": {
1880+
"on": "story-audio-unmuted",
1881+
"request": "event",
1882+
"vars": {
1883+
"event_name": "custom",
1884+
"event_action": "story_audio_unmuted",
1885+
"event_category": "${title}",
1886+
"send_to": "G-PQ5N2MZG5M"
1887+
}
1888+
},
1889+
"pageAttachmentEnter": {
1890+
"on": "story-page-attachment-enter",
1891+
"request": "event",
1892+
"vars": {
1893+
"event_name": "custom",
1894+
"event_action": "story_page_attachment_enter",
1895+
"event_category": "${title}",
1896+
"send_to": "G-PQ5N2MZG5M"
1897+
}
1898+
},
1899+
"pageAttachmentExit": {
1900+
"on": "story-page-attachment-exit",
1901+
"request": "event",
1902+
"vars": {
1903+
"event_name": "custom",
1904+
"event_action": "story_page_attachment_exit",
1905+
"event_category": "${title}",
1906+
"send_to": "G-PQ5N2MZG5M"
1907+
}
1908+
},
1909+
"storyBookendEnter": {
1910+
"on": "story-bookend-enter",
1911+
"request": "event",
1912+
"vars": {
1913+
"event_name": "custom",
1914+
"event_action": "story_bookend_enter",
1915+
"event_category": "${title}",
1916+
"send_to": "G-PQ5N2MZG5M"
1917+
}
1918+
},
1919+
"storyBookendExit": {
1920+
"on": "story-bookend-exit",
1921+
"request": "event",
1922+
"vars": {
1923+
"event_name": "custom",
1924+
"event_action": "story_bookend_exit",
1925+
"event_category": "${title}",
1926+
"send_to": "G-PQ5N2MZG5M"
1927+
}
1928+
}
1929+
}
1930+
}
1931+
</script>
1932+
</amp-analytics>
17921933
</amp-story>
17931934
</body>
17941935
</html>

0 commit comments

Comments
 (0)