gtm-react-hook - npm Package Compare versions

Comparing version 0.0.5 to 0.0.6

dist/index.d.ts

@@ -19,4 +19,5 @@ type GTMConstructor = {
     eventGTM: (eventName: string, data?: object) => void;
+    uninstallGTM: () => void;
 };
 
 export { useGTM };

dist/index.js

@@ -1,10 +0,10 @@
-"use strict";var p=Object.defineProperty;var L=Object.getOwnPropertyDescriptor;var $=Object.getOwnPropertyNames,f=Object.getOwnPropertySymbols;var T=Object.prototype.hasOwnProperty,D=Object.prototype.propertyIsEnumerable;var g=(e,t,o)=>t in e?p(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,h=(e,t)=>{for(var o in t||(t={}))T.call(t,o)&&g(e,o,t[o]);if(f)for(var o of f(t))D.call(t,o)&&g(e,o,t[o]);return e};var G=(e,t)=>{for(var o in t)p(e,o,{get:t[o],enumerable:!0})},N=(e,t,o,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of $(t))!T.call(e,n)&&n!==o&&p(e,n,{get:()=>t[n],enumerable:!(s=L(t,n))||s.enumerable});return e};var b=e=>N(p({},"__esModule",{value:!0}),e);var C={};G(C,{useGTM:()=>M});module.exports=b(C);var i=require("react");var u="dataLayer",E="https://www.googletagmanager.com",w="gtm.js";var _=(e,t)=>e===void 0?"":t==="script"?`+ '&gtm_auth=${e.gtm_auth}&gtm_preview=${e.gtm_preview}&gtm_cookies_win=x'`:`&gtm_auth=${e.gtm_auth}&gtm_preview=${e.gtm_preview}&gtm_cookies_win=x`,y=e=>{let[t,o]=e==="script"?["Script","header"]:["Noscript","body"];console.info(`\u{1F7E2} [gtm-react-hook] GTM ${t} was added to ${o}`)},A=e=>{let{tagId:t,domain:o=E,script:s=w,dataLayerName:n=u,nonce:r,environment:c,devMode:m}=e,d=document.createElement("script");r&&d.setAttribute("nonce",r);let l=_(c,"script");d.innerHTML=`(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+"use strict";var u=Object.defineProperty;var $=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames,_=Object.getOwnPropertySymbols;var E=Object.prototype.hasOwnProperty,G=Object.prototype.propertyIsEnumerable;var w=(t,e,o)=>e in t?u(t,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[e]=o,y=(t,e)=>{for(var o in e||(e={}))E.call(e,o)&&w(t,o,e[o]);if(_)for(var o of _(e))G.call(e,o)&&w(t,o,e[o]);return t};var R=(t,e)=>{for(var o in e)u(t,o,{get:e[o],enumerable:!0})},b=(t,e,o,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of C(e))!E.call(t,n)&&n!==o&&u(t,n,{get:()=>e[n],enumerable:!(i=$(e,n))||i.enumerable});return t};var x=t=>b(u({},"__esModule",{value:!0}),t);var N={};R(N,{useGTM:()=>L});module.exports=x(N);var r=require("react");var g="dataLayer",A="https://www.googletagmanager.com",h="gtm.js",T="gtm-script",f="gtm-noscript";var M=(t,e)=>t===void 0?"":e==="script"?`+ '&gtm_auth=${t.gtm_auth}&gtm_preview=${t.gtm_preview}&gtm_cookies_win=x'`:`&gtm_auth=${t.gtm_auth}&gtm_preview=${t.gtm_preview}&gtm_cookies_win=x`,v=t=>{let[e,o]=t==="script"?["Script","header"]:["Noscript","body"];console.info(`\u{1F7E2} [gtm-react-hook] GTM ${e} was added to ${o}`)},D=t=>{let{tagId:e,domain:o=A,script:i=h,dataLayerName:n=g,nonce:a,environment:s,devMode:c}=t,d=document.createElement("script");d.id=T,d.setAttribute("data-testid",T),a&&d.setAttribute("nonce",a);let l=M(s,"script");d.innerHTML=`(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=
-    '${o}/${s}?id='+i+dl${l};f.parentNode.insertBefore(j,f);
-    })(window,document,'script','${n}','${t}');`,document.head.childNodes[0]?document.head.insertBefore(d,document.head.childNodes[0]):document.head.appendChild(d),m&&y("script");let a=document.createElement("noscript"),v=_(c,"noscript");a.innerHTML=`<iframe
-                  src="${o}/ns.html?id=${t}${v}"
+    '${o}/${i}?id='+i+dl${l};f.parentNode.insertBefore(j,f);
+    })(window,document,'script','${n}','${e}');`,document.head.insertBefore(d,document.head.childNodes[0]),c&&v("script");let m=document.createElement("noscript");m.id=f,m.setAttribute("data-testid",f);let p=M(s,"noscript");m.innerHTML=`<iframe
+                  src="${o}/ns.html?id=${e}${p}"
                   height="0"
                   width="0"
                   style="display:none;visibility:hidden"
-                  />`,document.body.childNodes[0]?document.body.insertBefore(a,document.body.childNodes[0]):document.body.appendChild(a),m&&y("noscript")};var M=()=>{let e=(0,i.useRef)(u),t=(0,i.useRef)(!1),o=(0,i.useCallback)(({tagId:n,dataLayerName:r,domain:c,environment:m,nonce:d,script:l,devMode:a})=>{a&&(t.current=!0),A({tagId:n,dataLayerName:r,domain:c,environment:m,nonce:d,script:l,devMode:a}),typeof r=="string"&&(e.current=r)},[]),s=(0,i.useCallback)((n,r)=>{if(e.current in window){let c=h({event:n},r);window[e.current].push(c),t.current&&console.info("\u{1F535} [gtm-react-hook] Event has sent! Payload:",c)}else console.warn("\u{1F534} [gtm-react-hook] Event didn't send! GTM is not initialized! Please, check its initialization")},[]);return(0,i.useMemo)(()=>({runGTM:o,eventGTM:s}),[o,s])};0&&(module.exports={useGTM});
+                  />`,document.body.insertBefore(m,document.body.childNodes[0]),c&&v("noscript")},I=()=>{let t=document.getElementById(T),e=document.getElementById(f);t&&e&&(document.head.removeChild(t),document.body.removeChild(e))};var L=()=>{let t=(0,r.useRef)(g),e=(0,r.useRef)(!1),o=(0,r.useCallback)(({tagId:a,dataLayerName:s,domain:c,environment:d,nonce:l,script:m,devMode:p})=>{p&&(e.current=!0),D({tagId:a,dataLayerName:s,domain:c,environment:d,nonce:l,script:m,devMode:p}),typeof s=="string"&&(t.current=s)},[]),i=(0,r.useCallback)((a,s)=>{if(t.current in window){let c=y({event:a},s);window[t.current].push(c),e.current&&console.info("\u{1F535} [gtm-react-hook] Event has sent! Payload:",c)}},[]),n=(0,r.useCallback)(()=>{I(),delete window[t.current]},[]);return(0,r.useMemo)(()=>({runGTM:o,eventGTM:i,uninstallGTM:n}),[o,i,n])};0&&(module.exports={useGTM});

package.json

 {
     "name": "gtm-react-hook",
     "description": "Easy-to-use React hooks for Google Tag Management based on TypeScript",
-    "version": "0.0.5",
+    "version": "0.0.6",
     "scripts": {
@@ -9,3 +9,4 @@ "start": "webpack serve --open",
         "build": "tsup",
-        "lint": "tsc"
+        "lint": "tsc",
+        "test": "jest"
     },
@@ -22,6 +23,10 @@ "dependencies": {
         "@changesets/cli": "^2.27.1",
+        "@testing-library/react": "^14.1.2",
+        "@types/jest": "^29.5.11",
         "@types/react": "^18.2.48",
         "@types/react-dom": "^18.2.18",
+        "@types/react-test-renderer": "^18.0.7",
         "@typescript-eslint/eslint-plugin": "^6.19.0",
         "@typescript-eslint/parser": "^6.19.0",
+        "babel-jest": "^29.7.0",
         "babel-loader": "^9.1.3",
@@ -31,2 +36,5 @@ "eslint": "^8.56.0",
         "eslint-plugin-react-refresh": "^0.4.5",
+        "jest": "^29.7.0",
+        "jest-environment-jsdom": "^29.7.0",
+        "react-test-renderer": "^18.2.0",
         "tsup": "^8.0.1",
@@ -33,0 +41,0 @@ "typescript": "^5.3.3",

README.md

@@ -48,3 +48,3 @@ # 📊 Easy-to-use React hooks for Google Tag Management based on TypeScript
 ```typescript 
-    const { runGTM, eventGTM } = useGTM();
+    const { runGTM, eventGTM, uninstallGTM } = useGTM();
 ```
@@ -68,2 +68,4 @@
 
+ #### uninstallGTM()
+
 ## 💅🏽 Examples
@@ -70,0 +72,0 @@

src/hooks/useGTM.ts

 import { useCallback, useMemo, useRef } from "react";
 
-import { createTags } from "@/utils/tags";
-import { DEFAULT_DATALAYER_NAME } from "@/utils/consts";
-import type { GTMConstructor } from "@/typings/typedefs";
+import { createTags, removeTags } from "../utils/tags";
+import { DEFAULT_DATALAYER_NAME } from "../utils/consts";
+import type { GTMConstructor } from "../typings/typedefs";
 
@@ -54,9 +54,10 @@ const useGTM = () => {
       }
-    } else {
-      console.warn(
-        "🔴 [gtm-react-hook] Event didn't send! GTM is not initialized! Please, check its initialization"
-      );
     }
   }, []);
 
+  const uninstallGTM = useCallback(() => {
+    removeTags();
+    delete window[dataLayerRef.current as keyof Window];
+  }, []);
+
   return useMemo(
@@ -66,4 +67,5 @@ () => ({
       eventGTM,
+      uninstallGTM,
     }),
-    [runGTM, eventGTM]
+    [runGTM, eventGTM, uninstallGTM]
   );
@@ -70,0 +72,0 @@ };

src/utils/consts.ts

 export const DEFAULT_DATALAYER_NAME = "dataLayer";
 export const DEFAULT_DOMAIN = "https://www.googletagmanager.com";
 export const DEFAULT_SCRIPT = "gtm.js";
+export const SCRIPT_ID = "gtm-script";
+export const NOSCRIPT_ID = "gtm-noscript";

src/utils/tags.ts

@@ -1,2 +0,2 @@
-import type { GTMConstructor, GTMEnvironment } from "@/typings/typedefs";
+import type { GTMConstructor, GTMEnvironment } from "../typings/typedefs";
 
@@ -7,2 +7,4 @@ import {
   DEFAULT_SCRIPT,
+  SCRIPT_ID,
+  NOSCRIPT_ID,
 } from "./consts";
@@ -41,2 +43,5 @@
   const scriptTag = document.createElement("script");
+  scriptTag.id = SCRIPT_ID;
+  scriptTag.setAttribute("data-testid", SCRIPT_ID);
+
   if (nonce) {
@@ -51,7 +56,3 @@ scriptTag.setAttribute("nonce", nonce);
     })(window,document,'script','${dataLayerName}','${tagId}');`;
-  if (document.head.childNodes[0]) {
-    document.head.insertBefore(scriptTag, document.head.childNodes[0]);
-  } else {
-    document.head.appendChild(scriptTag);
-  }
+  document.head.insertBefore(scriptTag, document.head.childNodes[0]!);
 
@@ -63,2 +64,4 @@ if (devMode) {
   const noScriptTag = document.createElement("noscript");
+  noScriptTag.id = NOSCRIPT_ID;
+  noScriptTag.setAttribute("data-testid", NOSCRIPT_ID);
   const iframeEnv = getEnvironmentString(environment, "noscript");
@@ -71,8 +74,5 @@ noScriptTag.innerHTML = `<iframe
                   />`;
-  if (document.body.childNodes[0]) {
-    document.body.insertBefore(noScriptTag, document.body.childNodes[0]);
-  } else {
-    document.body.appendChild(noScriptTag);
-  }
 
+  document.body.insertBefore(noScriptTag, document.body.childNodes[0]!);
+
   if (devMode) {
@@ -82,1 +82,11 @@ logEvent("noscript");
 };
+
+export const removeTags = () => {
+  const scriptTag = document.getElementById(SCRIPT_ID);
+  const noScriptTag = document.getElementById(NOSCRIPT_ID);
+
+  if (scriptTag && noScriptTag) {
+    document.head.removeChild(scriptTag);
+    document.body.removeChild(noScriptTag);
+  }
+};

No alert changes

Improved metrics

Total package byte prevSize

35400

increased by11.32%

Number of package files

23

increased by9.52%

Lines of code

460

increased by25.34%

Number of lines in readme file

137

increased by1.48%

Worsened metrics

Dev dependency count

25

increased by38.89%

No dependency changes