-
Notifications
You must be signed in to change notification settings - Fork 255
/
index.tsx
90 lines (86 loc) · 2.02 KB
/
index.tsx
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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
import * as React from "react";
import { Head, connect, css } from "frontity";
import { Connect } from "frontity/types";
import GoogleTagManagerAnalytics from "../../types";
/**
* Props used by {@link GtmCode}.
*/
interface GtmCodeProps {
/**
* GTM container ID.
*/
containerId: string;
}
/**
* Render the GTM library inside `<head>` for the given container ID.
*
* @example
* ```
* <GtmCode containerId={containerId} />
* ```
*
* @param props - Object of type {@link GtmCodeProps}.
*
* @returns React element.
*/
const GtmCode: React.FC<GtmCodeProps> = ({ containerId }) => (
<>
{/* Add the GTM script in the <head> */}
<Head>
<script
async
src={`https://www.googletagmanager.com/gtm.js?id=${containerId}`}
/>
<script>
{`
var dataLayer = window.dataLayer || [];
dataLayer.push({
"gtm.start": new Date().getTime(),
event: "gtm.js",
})
`}
</script>
</Head>
{/* Add the GTM noscript in the <body> */}
<noscript>
<iframe
title={containerId}
src={`https://www.googletagmanager.com/ns.html?id=${containerId}`}
height="0"
width="0"
css={css`
display: none;
visibility: hidden;
`}
/>
</noscript>
</>
);
/**
* Root component of the Comscore Analytics package.
*
* It renders the Comscore script library for each Comscore tracking ID defined
* in the state.
*
* @remarks
* This component is automatically rendered by Frontity and it's not meant to be
* imported and used anywhere.
*
* @param props - Injected props by `connect`.
*
* @returns Root element.
*/
export const Root: React.FC<Connect<GoogleTagManagerAnalytics>> = ({
state,
}) => {
const { containerId, containerIds } = state.googleTagManagerAnalytics;
const ids = containerIds || (containerId && [containerId]) || [];
return (
<>
{ids.map((id) => (
<GtmCode key={id} containerId={id} />
))}
</>
);
};
export default connect(Root);