/
gtm.js
70 lines (60 loc) · 2.04 KB
/
gtm.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
'use client'
// Taken from https://github.com/vercel/next.js/blob/canary/packages/third-parties/src/google/gtm.tsx
// Customised by Alistair Holt
import React, { useEffect } from 'react'
let currDataLayerName
export function GoogleTagManager(props) {
const { gtmId, dataLayerName = 'dataLayer', auth, preview, dataLayer } = props
if (currDataLayerName === undefined) {
currDataLayerName = dataLayerName
}
const gtmLayer = dataLayerName !== 'dataLayer' ? `&l=${dataLayerName}` : ''
const gtmAuth = auth ? `>m_auth=${auth}` : ''
const gtmPreview = preview ? `>m_preview=${preview}>m_cookies_win=x` : ''
useEffect(() => {
// performance.mark is being used as a feature use signal. While it is traditionally used for performance
// benchmarking it is low overhead and thus considered safe to use in production and it is a widely available
// existing API.
// The performance measurement will be handled by Chrome Aurora
performance.mark('mark_feature_usage', {
detail: {
feature: 'next-third-parties-gtm',
},
})
}, [])
return (
<>
<script
type='text/plain'
data-category='analytics'
data-service='Google Tag Manager'
dangerouslySetInnerHTML={{
__html: `
(function(w,l){
w[l]=w[l]||[];
w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});
${dataLayer ? `w[l].push(${JSON.stringify(dataLayer)})` : ''}
})(window,'${dataLayerName}');`,
}}
/>
<script
type='text/plain'
data-category='analytics'
data-service='Google Tag Manager'
src={`https://www.googletagmanager.com/gtm.js?id=${gtmId}${gtmLayer}${gtmAuth}${gtmPreview}`}
async
/>
</>
)
}
export const sendGTMEvent = (data) => {
if (currDataLayerName === undefined) {
console.warn(`GTM has not been initialized`)
return
}
if (window[currDataLayerName]) {
window[currDataLayerName].push(data)
} else {
console.warn(`GTM dataLayer ${currDataLayerName} does not exist`)
}
}