Skip to content

Commit d20492b

Browse files
jstirnamanjstirnaman
committed
chore(analytics): Migrate to GA4 Google tag. If on the local server, use debug mode and prevent tracking. Add the www.influxdata.com Google tag script. Remove the conditional from header.html. Remove the old, unused GTM ID
1 parent a925e3e commit d20492b

File tree

4 files changed

+184
-11
lines changed

4 files changed

+184
-11
lines changed

‎assets/js/code-controls.js

Lines changed: 153 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import $ from 'jquery';
2+
import { context } from './page-context.js';
23

34
function initialize() {
45
var codeBlockSelector = '.article--content pre';
@@ -68,9 +69,94 @@ function initialize() {
6869
// Trigger copy failure state lifecycle
6970

7071
$('.copy-code').click(function () {
71-
let text = $(this)
72+
let codeElement = $(this)
7273
.closest('.code-controls')
73-
.prevAll('pre:has(code)')[0].innerText;
74+
.prevAll('pre:has(code)')[0];
75+
76+
let text = codeElement.innerText;
77+
78+
// Extract additional code block information
79+
const codeBlockInfo = extractCodeBlockInfo(codeElement);
80+
81+
// Add Google Analytics event tracking
82+
const currentUrl = new URL(window.location.href);
83+
84+
// Determine which tracking parameter to add based on product context
85+
switch (context) {
86+
case 'cloud':
87+
currentUrl.searchParams.set('dl', 'cloud');
88+
break;
89+
case 'core':
90+
/** Track using the same value used by www.influxdata.com pages */
91+
currentUrl.searchParams.set('dl', 'oss3');
92+
break;
93+
case 'enterprise':
94+
/** Track using the same value used by www.influxdata.com pages */
95+
currentUrl.searchParams.set('dl', 'enterprise');
96+
break;
97+
case 'serverless':
98+
currentUrl.searchParams.set('dl', 'serverless');
99+
break;
100+
case 'dedicated':
101+
currentUrl.searchParams.set('dl', 'dedicated');
102+
break;
103+
case 'clustered':
104+
currentUrl.searchParams.set('dl', 'clustered');
105+
break;
106+
case 'oss/enterprise':
107+
currentUrl.searchParams.set('dl', 'oss');
108+
break;
109+
case 'other':
110+
default:
111+
// No tracking parameter for other/unknown products
112+
break;
113+
}
114+
115+
// Add code block specific tracking parameters
116+
if (codeBlockInfo.language) {
117+
currentUrl.searchParams.set('code_lang', codeBlockInfo.language);
118+
}
119+
if (codeBlockInfo.lineCount) {
120+
currentUrl.searchParams.set('code_lines', codeBlockInfo.lineCount);
121+
}
122+
if (codeBlockInfo.hasPlaceholders) {
123+
currentUrl.searchParams.set('has_placeholders', 'true');
124+
}
125+
if (codeBlockInfo.blockType) {
126+
currentUrl.searchParams.set('code_type', codeBlockInfo.blockType);
127+
}
128+
if (codeBlockInfo.sectionTitle) {
129+
currentUrl.searchParams.set(
130+
'section',
131+
encodeURIComponent(codeBlockInfo.sectionTitle)
132+
);
133+
}
134+
if (codeBlockInfo.firstLine) {
135+
currentUrl.searchParams.set(
136+
'first_line',
137+
encodeURIComponent(codeBlockInfo.firstLine.substring(0, 100))
138+
);
139+
}
140+
141+
// Update browser history without triggering page reload
142+
if (window.history && window.history.replaceState) {
143+
window.history.replaceState(null, '', currentUrl.toString());
144+
}
145+
146+
// Send custom Google Analytics event if gtag is available
147+
if (typeof window.gtag !== 'undefined') {
148+
window.gtag('event', 'code_copy', {
149+
language: codeBlockInfo.language,
150+
line_count: codeBlockInfo.lineCount,
151+
has_placeholders: codeBlockInfo.hasPlaceholders,
152+
dl: codeBlockInfo.dl || null,
153+
section_title: codeBlockInfo.sectionTitle,
154+
first_line: codeBlockInfo.firstLine
155+
? codeBlockInfo.firstLine.substring(0, 100)
156+
: null,
157+
product: context,
158+
});
159+
}
74160

75161
const copyContent = async () => {
76162
try {
@@ -84,6 +170,71 @@ function initialize() {
84170
copyContent();
85171
});
86172

173+
/**
174+
* Extract contextual information about a code block
175+
* @param {HTMLElement} codeElement - The code block element
176+
* @returns {Object} Information about the code block
177+
*/
178+
function extractCodeBlockInfo(codeElement) {
179+
const codeTag = codeElement.querySelector('code');
180+
const info = {
181+
language: null,
182+
lineCount: 0,
183+
hasPlaceholders: false,
184+
blockType: 'code',
185+
dl: null, // Download script type
186+
sectionTitle: null,
187+
firstLine: null,
188+
};
189+
190+
// Extract language from class attribute
191+
if (codeTag && codeTag.className) {
192+
const langMatch = codeTag.className.match(
193+
/language-(\w+)|hljs-(\w+)|(\w+)/
194+
);
195+
if (langMatch) {
196+
info.language = langMatch[1] || langMatch[2] || langMatch[3];
197+
}
198+
}
199+
200+
// Count lines
201+
const text = codeElement.innerText || '';
202+
const lines = text.split('\n');
203+
info.lineCount = lines.length;
204+
205+
// Get first non-empty line
206+
info.firstLine = lines.find((line) => line.trim() !== '') || null;
207+
208+
// Check for placeholders (common patterns)
209+
info.hasPlaceholders =
210+
/\b[A-Z_]{2,}\b|\{\{[^}]+\}\}|\$\{[^}]+\}|<[^>]+>/.test(text);
211+
212+
// Determine if this is a download script
213+
if (text.includes('https://www.influxdata.com/d/install_influxdb3.sh')) {
214+
if (text.includes('install_influxdb3.sh enterprise')) {
215+
info.dl = 'enterprise';
216+
} else {
217+
info.dl = 'oss3';
218+
}
219+
} else if (text.includes('docker pull influxdb:3-enterprise')) {
220+
info.dl = 'enterprise';
221+
} else if (text.includes('docker pull influxdb3-core')) {
222+
info.dl = 'oss3';
223+
}
224+
225+
// Find nearest section heading
226+
let element = codeElement;
227+
while (element && element !== document.body) {
228+
element = element.previousElementSibling || element.parentElement;
229+
if (element && element.tagName && /^H[1-6]$/.test(element.tagName)) {
230+
info.sectionTitle = element.textContent.trim();
231+
break;
232+
}
233+
}
234+
235+
return info;
236+
}
237+
87238
/////////////////////////////// FULL WINDOW CODE ///////////////////////////////
88239

89240
/*

‎config/staging/hugo.yml

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ minify:
1313
params:
1414
env: staging
1515
environment: staging
16-
server:
16+
server: {
1717
disableLiveReload: true
18+
}
1819

‎layouts/partials/header.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<!doctype html>
66
<html lang="en">
77
<head>
8-
{{ if not hugo.IsServer }}{{ partial "header/google-analytics-head.html" }}{{ end }}
8+
{{ partial "header/google-analytics-head.html" }}
99
<meta charset="utf-8">
1010
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
1111

‎layouts/partials/header/google-analytics-head.html

Lines changed: 28 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,28 @@
1-
<!-- Google Tag Manager -->
2-
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
3-
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
4-
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
5-
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
6-
})(window,document,'script','dataLayer','GTM-WXRH9C');</script>
7-
<!-- End Google Tag Manager -->
1+
{{ if and hugo.IsServer (not (eq .Site.Params.environment "staging")) }}
2+
<!-- Development: GA4 in debug mode -->
3+
<script async src="https://www.googletagmanager.com/gtag/js?id=G-3C2W1T8YS4"></script>
4+
<script>
5+
const gtagID = 'G-3C2W1T8YS4';
6+
window.dataLayer = window.dataLayer || [];
7+
function gtag(){dataLayer.push(arguments);}
8+
gtag('js', new Date());
9+
gtag('config', gtagID, {
10+
'debug_mode': true,
11+
'send_page_view': false,
12+
'transport_type': 'beacon'
13+
});
14+
console.log('GA4 loaded in debug mode -', gtagID);
15+
</script>
16+
{{ else }}
17+
<!-- Production/Staging: Normal GA4 -->
18+
<script async src="https://www.googletagmanager.com/gtag/js?id=G-3C2W1T8YS4"></script>
19+
<script>
20+
window.dataLayer = window.dataLayer || [];
21+
function gtag(){dataLayer.push(arguments);}
22+
gtag('js', new Date());
23+
gtag('config', 'G-3C2W1T8YS4', {
24+
'send_page_view': true,
25+
'transport_type': 'beacon'
26+
});
27+
</script>
28+
{{ end }}

0 commit comments

Comments
 (0)