diff --git a/package-lock.json b/package-lock.json index dcdde831a..421499f39 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 784d95fd5..780ac8970 100644 --- a/package.json +++ b/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", diff --git a/src/index.tsx b/src/index.tsx index d38f2e5ad..0b99b5ff7 100644 --- a/src/index.tsx +++ b/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) || diff --git a/webpack.config.js b/webpack.config.js index ad8a00efb..db1920d20 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -22,10 +22,12 @@ const htmlWebpackPlugin = new HtmlWebpackPlugin({ hash: true, template: "./src/index.html" }); -const environmentPlugin = new webpack.EnvironmentPlugin([ - "APP_MOUNT_URI", - "API_URI" -]); +const environmentPlugin = new webpack.EnvironmentPlugin({ + 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) { - throw new Error("Environment variable API_URI not set") + if (!process.env.API_URI) { + throw new Error("Environment variable API_URI not set"); } if (!devMode) {