TCA-314 #comment This commit adds GTM to FCC w/env-specific accounts #time 15m

Author: brooketopcoder

client/package.json

@@ -96,6 +96,7 @@
     "react-dom": "16.14.0",
     "react-final-form": "6.5.9",
     "react-ga": "3.3.0",
+    "react-gtm-module": "^2.0.11",
     "react-helmet": "6.1.0",
     "react-hotkeys": "2.0.0",
     "react-i18next": "11.16.9",

client/src/analytics/google-tag-manater/GoogleTagManager.tsx

@@ -0,0 +1,29 @@
+import { FC } from 'react';
+import TagManager from 'react-gtm-module';
+
+import {
+  devTagManagerId,
+  prodTagManagerId
+} from '../../../../config/analytics-settings';
+
+import envData from '../../../../config/env.json';
+
+/* eslint-disable @typescript-eslint/ban-types */
+const GoogleTagManager: FC<{}> = () => {
+  // if we  have an ID
+  // then tags are supported in this environment,
+  // so initialize them
+  const segmentId =
+    envData.deploymentEnv === 'staging' ? devTagManagerId : prodTagManagerId;
+  if (segmentId) {
+    /* eslint-disable @typescript-eslint/no-unsafe-member-access */
+    /* eslint-disable @typescript-eslint/no-unsafe-call */
+    TagManager.initialize({
+      gtmId: segmentId
+    });
+  }
+
+  return null;
+};
+
+export default GoogleTagManager;

client/src/analytics/google-tag-manater/index.ts

@@ -0,0 +1 @@
+export { default as GoogleTagManager } from './GoogleTagManager';

client/src/analytics/segment/Segment.tsx

@@ -14,7 +14,8 @@ interface SegmentModel {
 
 const segmentModel: SegmentModel = segment as unknown as SegmentModel;
 
-const Segment: FC<null> = () => {
+/* eslint-disable @typescript-eslint/ban-types */
+const Segment: FC<{}> = () => {
   // if we have a key for this environment, load it
   const segmentId =
     envData.deploymentEnv === 'staging' ? devSegmentId : prodSegmentId;

client/src/templates/Challenges/classic/desktop-layout.tsx

@@ -3,6 +3,7 @@ import React, { useState, ReactElement } from 'react';
 import { ReflexContainer, ReflexSplitter, ReflexElement } from 'react-reflex';
 import { sortChallengeFiles } from '../../../../../utils/sort-challengefiles';
 import { challengeTypes } from '../../../../utils/challenge-types';
+import { GoogleTagManager } from '../../../analytics/google-tag-manater';
 import { Segment } from '../../../analytics/segment';
 import {
   ChallengeFile,
@@ -194,6 +195,7 @@ const DesktopLayout = (props: DesktopLayoutProps): JSX.Element => {
       </div>
 
       <Segment />
+      <GoogleTagManager />
     </>
   );
 };

client/src/templates/Challenges/classic/tc-layout.tsx

@@ -3,6 +3,7 @@ import React, { ReactElement } from 'react';
 import { ReflexContainer, ReflexSplitter, ReflexElement } from 'react-reflex';
 
 import { sortChallengeFiles } from '../../../../../utils/sort-challengefiles';
+import { GoogleTagManager } from '../../../analytics/google-tag-manater';
 import Segment from '../../../analytics/segment/Segment';
 import {
   ChallengeFile,
@@ -132,6 +133,7 @@ const TcLayout = (props: TcLayoutProps): JSX.Element => {
       </div>
 
       <Segment />
+      <GoogleTagManager />
     </>
   );
 };

config/analytics-settings.js

@@ -1,6 +1,9 @@
 exports.prodAnalyticsId = null;
-exports.prodSegmentId = '8fCbi94o3ruUUGxRRGxWu194t6iVq9LH';
-
 exports.devAnalyticsId = null;
+
+exports.prodSegmentId = '8fCbi94o3ruUUGxRRGxWu194t6iVq9LH';
 // TODO: TCA-371 set this to null so we're not tracking non-prod
 exports.devSegmentId = '8fCbi94o3ruUUGxRRGxWu194t6iVq9LH';
+
+exports.prodTagManagerId = 'GTM-MXXQHG8';
+exports.devTagManagerId = 'GTM-W7B537Z';