fix: load initial script

Author: MickaelAustoni

CHANGELOG.md

@@ -1,4 +1,4 @@
 # [Versions](https://github.com/Tracktor/react-google-tag-manager/releases)
 
-## v1.2.1
-- **[REFACTOR]** : change `vite-plugin-dts `as devDependencies
+## v1.2.3
+- **[fix]** : load initial script

README.md

@@ -2,12 +2,13 @@
 
 [![npm version](https://badge.fury.io/js/%40tracktor%2Freact-google-tag-manager.svg)](https://badge.fury.io/js/%40tracktor%2Freact-google-tag-manager)
 
-**React library for use easily the Google Tag Manager**
+**Very light React library for use easily the Google Tag Manager**
 
 
 - [Installation](#Installation)
 - [Usage](#Usage)
-- [Options](#Options)
+- [Props and options](#Props-and-Options)
+- [Hooks](#kook)
 
 ## Installation
 
@@ -48,9 +49,10 @@ const YourComponent = () => {
 
 export default App;
 ```
-## Options
 
-Your can provide some options to the provider.
+## Props and options
+
+Your can provide some props and options to the provider.
 
 ```typescript jsx
 import { GoogleTagManagerProvider } from "@tracktor/react-google-tag-manager";
@@ -63,10 +65,21 @@ const App = () => (
 
 export default App;
 ```
+| Props   | Type       | Default   | Description                                                                                                                   |
+|---------|------------|-----------|-------------------------------------------------------------------------------------------------------------------------------|
+| id      | GTM-XXXXXX | undefined | Define the Google Tag Manager ID id. You can create an account to get an ID here : https://tagmanager.google.com/?hl=fr#/home |
+| options | object     | undefined | Provider options                                                                                                              |
+
 
+| Option        | Type   | Default                                 | Description             |
+|---------------|--------|-----------------------------------------|-------------------------|
+| scriptUrl     | string | https://www.googletagmanager.com/gtm.js | Set script url to load  |
+| dataLayerName | string | dataLayer                               | Set the data layer name |
 
-| Option        | Type   | Default                                  | Description             |
-|---------------|--------|------------------------------------------|-------------------------|
-| scriptUrl     | string | https://www.googletagmanager.com/gtag/js | Set script url to load  |
-| dataLayerName | string | dataLayer                                | Set the data layer name |
+## Hooks
+`useGoogleTagManager`
 
+| Export    | type     | Description    |
+|-----------|----------|----------------|
+| sendEvent | function | Send GTM event |
+| id        | string   | The GTM id     |

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tracktor/react-google-tag-manager",
   "description": "React library for use easily the Google Tag Manager",
-  "version": "1.2.1",
+  "version": "1.2.3",
   "private": false,
   "license": "ISC",
   "type": "module",
@@ -35,7 +35,7 @@
     "prepare": "yarn run build && husky install"
   },
   "dependencies": {
-    "@tracktor/react-utils": "^1.7.0",
+    "@tracktor/react-utils": "^1.9.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

src/context/GoogleTagManagerProvider.tsx

@@ -1,40 +1,63 @@
-import { useScript } from "@tracktor/react-utils";
-import { createContext, ReactNode, useMemo } from "react";
+import { useIsomorphicLayoutEffect, useScript } from "@tracktor/react-utils";
+import { createContext, ReactNode, useMemo, useRef } from "react";
+import { injectDataLayer, createNoScript } from "@/utils/utilsGTM";
 
 interface GoogleTagManagerProviderProps {
-  id: string;
+  id?: `GTM-${string}` | string;
   options?: {
     scriptUrl?: string;
     dataLayerName?: string;
   };
   children: ReactNode;
 }
 
-const DEFAULT_SCRIPT_URL = "https://www.googletagmanager.com/gtag/js";
-const DEFAULT_DATA_LAYER_NAME = "dataLayer";
+interface DefaultContextValue {
+  id?: GoogleTagManagerProviderProps["id"];
+  options: {
+    scriptUrl: string;
+    dataLayerName: string;
+  };
+}
 
-export const GoogleTagManagerContext = createContext({
-  id: "",
+const defaultContextValue = {
+  id: undefined,
   options: {
-    dataLayerName: DEFAULT_DATA_LAYER_NAME,
-    scriptUrl: DEFAULT_SCRIPT_URL,
+    dataLayerName: "dataLayer",
+    scriptUrl: "https://www.googletagmanager.com/gtm.js",
   },
-});
+};
+
+export const GoogleTagManagerContext = createContext<DefaultContextValue>(defaultContextValue);
 
 const GoogleTagManagerProvider = ({ children, id, options }: GoogleTagManagerProviderProps) => {
+  const { dataLayerName, scriptUrl } = { ...options, ...defaultContextValue.options };
+  const isInitialized = useRef<boolean>(false);
+
   const value = useMemo(
     () => ({
       id,
       options: {
-        dataLayerName: options?.dataLayerName || DEFAULT_DATA_LAYER_NAME,
-        scriptUrl: options?.scriptUrl || DEFAULT_SCRIPT_URL,
+        dataLayerName,
+        scriptUrl,
       },
     }),
-    [id, options]
+    [dataLayerName, id, scriptUrl]
   );
 
+  // Initialize GTM
+  useIsomorphicLayoutEffect(() => {
+    if (!id || isInitialized.current) {
+      return;
+    }
+
+    isInitialized.current = true;
+
+    injectDataLayer(dataLayerName);
+    createNoScript(id);
+  }, [dataLayerName, id]);
+
   // Load the script asynchronously
-  useScript(`${value.options.scriptUrl}?id=${value.id}`, !!value.id);
+  useScript(`${value.options.scriptUrl}?id=${value.id}`, { enable: !!value.id, position: "head-start" });
 
   return <GoogleTagManagerContext.Provider value={value}>{children}</GoogleTagManagerContext.Provider>;
 };

src/utils/utilsGTM.ts

@@ -0,0 +1,27 @@
+/**
+ * Create the GTM noscript tag
+ * @param id
+ */
+export const createNoScript = (id: string) => {
+  // Create additional noscript tag
+  const noscript = document.createElement("noscript");
+  const iframe = document.createElement("iframe");
+
+  iframe.src = `https://www.googletagmanager.com/ns.html?id=${id}`;
+  iframe.height = "0";
+  iframe.width = "0";
+  iframe.style.display = "none";
+  iframe.style.visibility = "hidden";
+
+  noscript.appendChild(iframe);
+  document.body.insertBefore(noscript, document.body.childNodes[0]);
+};
+
+/**
+ * Inject the dataLayer
+ * @param dataLayerName
+ */
+export const injectDataLayer = (dataLayerName: string) => {
+  window[dataLayerName] = window[dataLayerName] || [];
+  window[dataLayerName].push({ event: "gtm.js", "gtm.start": new Date().getTime() });
+};