initial integration with GTM

SkalskiP · Sep 2, 2021 · 80d27d4 · 80d27d4
1 parent c77b15a
commit 80d27d4
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 43 deletions.
diff --git a/public/index.html b/public/index.html
@@ -10,6 +10,11 @@
 
       gtag('config', 'UA-155837750-1');
     </script>
+    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+              new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+            j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+            'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+    })(window,document,'script','dataLayer','GTM-5N6WR7G');</script>
 
     <meta charset="utf-8" />
     <link rel="shortcut icon" href="%PUBLIC_URL%/make-sense-ico.png" />
@@ -34,6 +39,9 @@
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
+    <noscript>
+      <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5N6WR7G" height="0" width="0" style="display:none;visibility:hidden"></iframe>
+    </noscript>
     <div id="root"></div>
     <!--
       This HTML file is a template.

diff --git a/src/views/Common/TextButton/TextButton.tsx b/src/views/Common/TextButton/TextButton.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import './TextButton.scss';
-import classNames from "classnames";
+import classNames from 'classnames';
 
 interface IProps {
     key?:string;
@@ -17,18 +17,20 @@ export const TextButton = (props:IProps) => {
 
     const getClassName = () => {
         return classNames(
-            "TextButton",
+            'TextButton',
             externalClassName,
             {
-                "active": isActive,
-                "disabled": isDisabled
+                'active': isActive,
+                'disabled': isDisabled
             }
         );
     };
 
     const onClickHandler = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
         event.stopPropagation();
-        !!onClick && onClick();
+        if (onClick) {
+            onClick();
+        }
     };
 
     return(
@@ -41,4 +43,4 @@ export const TextButton = (props:IProps) => {
             {label}
         </div>
     )
-};
+};
diff --git a/src/views/MainView/MainView.tsx b/src/views/MainView/MainView.tsx
@@ -1,15 +1,15 @@
 import React, {useState} from 'react';
 import './MainView.scss';
-import {TextButton} from "../Common/TextButton/TextButton";
+import {TextButton} from '../Common/TextButton/TextButton';
 import classNames from 'classnames';
-import {ISize} from "../../interfaces/ISize";
-import {ImageButton} from "../Common/ImageButton/ImageButton";
-import {ISocialMedia, SocialMediaData} from "../../data/info/SocialMediaData";
-import {EditorFeatureData, IEditorFeature} from "../../data/info/EditorFeatureData";
-import {Tooltip} from "@material-ui/core";
-import Fade from "@material-ui/core/Fade";
-import withStyles from "@material-ui/core/styles/withStyles";
-import ImagesDropZone from "./ImagesDropZone/ImagesDropZone";
+import {ISize} from '../../interfaces/ISize';
+import {ImageButton} from '../Common/ImageButton/ImageButton';
+import {ISocialMedia, SocialMediaData} from '../../data/info/SocialMediaData';
+import {EditorFeatureData, IEditorFeature} from '../../data/info/EditorFeatureData';
+import {Tooltip} from '@material-ui/core';
+import Fade from '@material-ui/core/Fade';
+import withStyles from '@material-ui/core/styles/withStyles';
+import ImagesDropZone from './ImagesDropZone/ImagesDropZone';
 
 const MainView: React.FC = () => {
     const [projectInProgress, setProjectInProgress] = useState(false);
@@ -26,17 +26,17 @@ const MainView: React.FC = () => {
 
     const getClassName = () => {
         return classNames(
-            "MainView", {
-                "InProgress": projectInProgress,
-                "Canceled": !projectInProgress && projectCanceled
+            'MainView', {
+                'InProgress': projectInProgress,
+                'Canceled': !projectInProgress && projectCanceled
             }
         );
     };
 
     const DarkTooltip = withStyles(theme => ({
         tooltip: {
-            backgroundColor: "#171717",
-            color: "#ffffff",
+            backgroundColor: '#171717',
+            color: '#ffffff',
             boxShadow: theme.shadows[1],
             fontSize: 11,
             maxWidth: 120
@@ -47,11 +47,11 @@ const MainView: React.FC = () => {
         return SocialMediaData.map((data:ISocialMedia, index: number) => {
             return <DarkTooltip
                 key={index}
-                disableFocusListener
+                disableFocusListener={true}
                 title={data.tooltipMessage}
                 TransitionComponent={Fade}
                 TransitionProps={{ timeout: 600 }}
-                placement="left"
+                placement='left'
             >
                 <div>
                     <ImageButton
@@ -68,18 +68,18 @@ const MainView: React.FC = () => {
     const getEditorFeatureTiles = () => {
         return EditorFeatureData.map((data:IEditorFeature) => {
             return <div
-                className="EditorFeaturesTiles"
+                className='EditorFeaturesTiles'
                 key={data.displayText}
             >
                 <div
-                    className="EditorFeaturesTilesWrapper"
+                    className='EditorFeaturesTilesWrapper'
                 >
                     <img
                         draggable={false}
                         alt={data.imageAlt}
                         src={data.imageSrc}
                     />
-                    <div className="EditorFeatureLabel">
+                    <div className='EditorFeatureLabel'>
                         {data.displayText}
                     </div>
                 </div>
@@ -89,50 +89,51 @@ const MainView: React.FC = () => {
 
     return (
         <div className={getClassName()}>
-            <div className="Slider" id="lower">
-                <div className="TriangleVertical">
-                    <div className="TriangleVerticalContent"/>
+            <div className='Slider' id='lower'>
+                <div className='TriangleVertical'>
+                    <div className='TriangleVerticalContent'/>
                 </div>
             </div>
 
-            <div className="Slider" id="upper">
-                <div className="TriangleVertical">
-                    <div className="TriangleVerticalContent"/>
+            <div className='Slider' id='upper'>
+                <div className='TriangleVertical'>
+                    <div className='TriangleVerticalContent'/>
                 </div>
             </div>
 
-            <div className="LeftColumn">
-                <div className={"LogoWrapper"}>
+            <div className='LeftColumn'>
+                <div className={'LogoWrapper'}>
                     <img
                         draggable={false}
-                        alt={"main-logo"}
-                        src={"ico/main-image-color.png"}
+                        alt={'main-logo'}
+                        src={'ico/main-image-color.png'}
                     />
                 </div>
-                <div className="EditorFeaturesWrapper">
+                <div className='EditorFeaturesWrapper'>
                     {getEditorFeatureTiles()}
                 </div>
-                <div className="TriangleVertical">
-                    <div className="TriangleVerticalContent"/>
+                <div className='TriangleVertical'>
+                    <div className='TriangleVerticalContent'/>
                 </div>
                 {projectInProgress && <TextButton
-                    label={"Go Back"}
+                    label={'Go Back'}
                     onClick={endProject}
                 />}
             </div>
-            <div className="RightColumn">
+            <div className='RightColumn'>
                 <div/>
                 <ImagesDropZone/>
-                <div className="SocialMediaWrapper">
+                <div className='SocialMediaWrapper'>
                     {getSocialMediaButtons({width: 30, height: 30})}
                 </div>
                 {!projectInProgress && <TextButton
-                    label={"Get Started"}
+                    label={'Get Started'}
                     onClick={startProject}
+                    externalClassName={'get-started-button'}
                 />}
             </div>
         </div>
     );
 };
 
-export default MainView;
+export default MainView;