Mirror: The highly customizable and versatile GraphQL client with which you add on features like normalized caching as you grow.

chore: add google tag manager (#2028)

Changed files
+24 -1
packages
+1
packages/site/package.json
···
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-ga": "^3.3.0",
"react-inlinesvg": "^1.2.0",
"react-is": "^17.0.2",
"react-router": "^5.2.0",
···
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-ga": "^3.3.0",
+
"react-gtm-module": "^2.0.11",
"react-inlinesvg": "^1.2.0",
"react-is": "^17.0.2",
"react-router": "^5.2.0",
+6 -1
packages/site/src/app.js
···
// eslint-disable-next-line react/no-multi-comp
-
import React from 'react';
import { Root, Routes } from 'react-static';
import { ThemeProvider } from 'styled-components';
···
import { GlobalStyle } from './styles/global';
import * as theme from './styles/theme';
import Analytics from './google-analytics';
import { Loading } from './components/loading';
const App = () => {
return (
<Root>
<ThemeProvider theme={theme}>
···
// eslint-disable-next-line react/no-multi-comp
+
import React, { useEffect } from 'react';
import { Root, Routes } from 'react-static';
import { ThemeProvider } from 'styled-components';
···
import { GlobalStyle } from './styles/global';
import * as theme from './styles/theme';
import Analytics from './google-analytics';
+
import { initGoogleTagManager } from './google-tag-manager';
import { Loading } from './components/loading';
const App = () => {
+
useEffect(() => {
+
initGoogleTagManager();
+
}, []);
+
return (
<Root>
<ThemeProvider theme={theme}>
+12
packages/site/src/google-tag-manager.js
···
···
+
/**
+
* Google Tag Manager
+
*/
+
const TagManager = require('react-gtm-module');
+
+
export const initGoogleTagManager = () => {
+
if (typeof document === 'undefined') {
+
return {};
+
} else {
+
return TagManager.initialize({ gtmId: 'GTM-MD32945' });
+
}
+
};
+5
yarn.lock
···
resolved "https://registry.yarnpkg.com/react-ga/-/react-ga-3.3.0.tgz#c91f407198adcb3b49e2bc5c12b3fe460039b3ca"
integrity sha512-o8RScHj6Lb8cwy3GMrVH6NJvL+y0zpJvKtc0+wmH7Bt23rszJmnqEQxRbyrqUzk9DTJIHoP42bfO5rswC9SWBQ==
react-helmet-async@^1.0.7:
version "1.0.9"
resolved "https://registry.yarnpkg.com/react-helmet-async/-/react-helmet-async-1.0.9.tgz#5b9ed2059de6b4aab47f769532f9fbcbce16c5ca"
···
resolved "https://registry.yarnpkg.com/react-ga/-/react-ga-3.3.0.tgz#c91f407198adcb3b49e2bc5c12b3fe460039b3ca"
integrity sha512-o8RScHj6Lb8cwy3GMrVH6NJvL+y0zpJvKtc0+wmH7Bt23rszJmnqEQxRbyrqUzk9DTJIHoP42bfO5rswC9SWBQ==
+
react-gtm-module@^2.0.11:
+
version "2.0.11"
+
resolved "https://registry.yarnpkg.com/react-gtm-module/-/react-gtm-module-2.0.11.tgz#14484dac8257acd93614e347c32da9c5ac524206"
+
integrity sha512-8gyj4TTxeP7eEyc2QKawEuQoAZdjKvMY4pgWfycGmqGByhs17fR+zEBs0JUDq4US/l+vbTl+6zvUIx27iDo/Vw==
+
react-helmet-async@^1.0.7:
version "1.0.9"
resolved "https://registry.yarnpkg.com/react-helmet-async/-/react-helmet-async-1.0.9.tgz#5b9ed2059de6b4aab47f769532f9fbcbce16c5ca"