Add GTM

package-lock.json

@@ -17951,6 +17951,11 @@
         "react-clientside-effect": "^1.2.0"
       }
     },
+    "react-gtm-module": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/react-gtm-module/-/react-gtm-module-2.0.8.tgz",
+      "integrity": "sha512-OU5FwAHC3gWnnxJ+MLwBMLZO1Pmn1DiVCGHqptwDnNojE3QRrNxjqozkW5cNS4Zp+C6HZ8a4ZIt0QPNlpzua4Q=="
+    },
     "react-helmet": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-5.2.1.tgz",

package.json

@@ -52,6 +52,7 @@
     "react-dom": "^16.9.0",
     "react-dropzone": "^8.2.0",
     "react-error-boundary": "^1.2.5",
+    "react-gtm-module": "^2.0.8",
     "react-helmet": "^5.2.1",
     "react-infinite-scroller": "^1.2.4",
     "react-inlinesvg": "^0.8.4",

src/index.tsx

@@ -1,5 +1,3 @@
-import Navigator from "@saleor/components/Navigator";
-import useAppState from "@saleor/hooks/useAppState";
 import { defaultDataIdFromObject, InMemoryCache } from "apollo-cache-inmemory";
 import { ApolloClient } from "apollo-client";
 import { ApolloLink } from "apollo-link";
@@ -14,6 +12,9 @@ import ErrorBoundary from "react-error-boundary";
 import { useIntl } from "react-intl";
 import { BrowserRouter, Route, Switch } from "react-router-dom";
 
+import Navigator from "@saleor/components/Navigator";
+import useAppState from "@saleor/hooks/useAppState";
+import TagManager from "react-gtm-module";
 import AttributeSection from "./attributes";
 import { attributeSection } from "./attributes/urls";
 import Auth, { getAuthToken, removeAuthToken } from "./auth";
@@ -31,7 +32,7 @@ import { MessageManager } from "./components/messages";
 import { ShopProvider } from "./components/Shop";
 import ThemeProvider from "./components/Theme";
 import { WindowTitle } from "./components/WindowTitle";
-import { API_URI, APP_MOUNT_URI } from "./config";
+import { API_URI, APP_MOUNT_URI, GTM_ID } from "./config";
 import ConfigurationSection, { createConfigurationMenu } from "./configuration";
 import AppStateProvider from "./containers/AppState";
 import { CustomerSection } from "./customers";
@@ -66,6 +67,10 @@ interface ResponseError extends ErrorResponse {
   };
 }
 
+if (process.env.GTM_ID !== undefined) {
+  TagManager.initialize({ gtmId: GTM_ID });
+}
+
 const invalidTokenLink = onError((error: ResponseError) => {
   if (
     (error.networkError && error.networkError.statusCode === 401) ||

webpack.config.js

@@ -22,10 +22,12 @@ const htmlWebpackPlugin = new HtmlWebpackPlugin({
   hash: true,
   template: "./src/index.html"
 });
-const environmentPlugin = new webpack.EnvironmentPlugin([
+const environmentPlugin = new webpack.EnvironmentPlugin({
-  "APP_MOUNT_URI",
+  API_URI: "",
-  "API_URI"
+  APP_MOUNT_URI: "/",
-]);
+  DEMO_MODE: false,
+  GTM_ID: ""
+});
 
 const dashboardBuildPath = "build/dashboard/";
 
@@ -35,8 +37,8 @@ module.exports = (env, argv) => {
   let fileLoaderPath;
   let output;
 
-  if(!process.env.API_URI) {
+  if (!process.env.API_URI) {
-    throw new Error("Environment variable API_URI not set")
+    throw new Error("Environment variable API_URI not set");
   }
 
   if (!devMode) {