| 14 | let currDataLayerName: string | undefined = undefined |
| 15 | |
| 16 | export function GoogleAnalytics(props: GAParams) { |
| 17 | const { gaId, debugMode, dataLayerName = 'dataLayer', nonce } = props |
| 18 | |
| 19 | if (currDataLayerName === undefined) { |
| 20 | currDataLayerName = dataLayerName |
| 21 | } |
| 22 | |
| 23 | useEffect(() => { |
| 24 | // performance.mark is being used as a feature use signal. While it is traditionally used for performance |
| 25 | // benchmarking it is low overhead and thus considered safe to use in production and it is a widely available |
| 26 | // existing API. |
| 27 | // The performance measurement will be handled by Chrome Aurora |
| 28 | |
| 29 | performance.mark('mark_feature_usage', { |
| 30 | detail: { |
| 31 | feature: 'next-third-parties-ga', |
| 32 | }, |
| 33 | }) |
| 34 | }, []) |
| 35 | |
| 36 | return ( |
| 37 | <> |
| 38 | <Script |
| 39 | id="_next-ga-init" |
| 40 | dangerouslySetInnerHTML={{ |
| 41 | __html: ` |
| 42 | window['${dataLayerName}'] = window['${dataLayerName}'] || []; |
| 43 | function gtag(){window['${dataLayerName}'].push(arguments);} |
| 44 | gtag('js', new Date()); |
| 45 | |
| 46 | gtag('config', '${gaId}' ${debugMode ? ",{ 'debug_mode': true }" : ''});`, |
| 47 | }} |
| 48 | nonce={nonce} |
| 49 | /> |
| 50 | <Script |
| 51 | id="_next-ga" |
| 52 | src={`https://www.googletagmanager.com/gtag/js?id=${gaId}`} |
| 53 | nonce={nonce} |
| 54 | /> |
| 55 | </> |
| 56 | ) |
| 57 | } |
| 58 | |
| 59 | export function sendGAEvent(..._args: Object[]) { |
| 60 | if (currDataLayerName === undefined) { |