@elgorditosalsero/react-gtm-hook - npm Package Compare versions

Comparing version 2.0.8 to 2.1.0

dist/models/GoogleTagManager.d.ts

@@ -36,2 +36,3 @@ /**
     environment?: ICustomEnvironmentParams;
+    nonce?: string;
     id: string;
@@ -38,0 +39,0 @@ };

dist/react-gtm-hook.cjs.development.js

@@ -96,2 +96,7 @@ 'use strict';
     var script = document.createElement('script');
+
+    if (params.nonce) {
+      script.setAttribute("nonce", params.nonce);
+    }
+
     script.innerHTML = getGTMScript(params.dataLayerName, params.id, params.environment);
@@ -112,2 +117,3 @@ return script;
  * @param environment - Specify the custom environment to use
+ * @param nonce - Server-generated nonce
  * @param id - The ID of the GTM
@@ -121,2 +127,3 @@ */
       environment = _ref.environment,
+      nonce = _ref.nonce,
       id = _ref.id;
@@ -127,2 +134,3 @@ var gtm = setupGTM({
     environment: environment,
+    nonce: nonce,
     id: id
@@ -157,2 +165,3 @@ });
   environment: undefined,
+  nonce: undefined,
   id: ''
@@ -192,2 +201,3 @@ };
       environment: store.environment,
+      nonce: store.nonce,
       id: store.id
@@ -194,0 +204,0 @@ });

dist/react-gtm-hook.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),a=(e=t)&&"object"==typeof e&&"default"in e?e.default:e;function r(){return(r=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)Object.prototype.hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e}).apply(this,arguments)}var n=function(e){return window[e.dataLayerName].push(e.data)},i={dataLayer:void 0,dataLayerName:"dataLayer",environment:void 0,id:""},o=t.createContext(i),d=t.createContext(void 0);function c(e,t){return n({data:t,dataLayerName:null==e?void 0:e.dataLayerName}),e}exports.GTMContext=o,exports.GTMContextDispatch=d,exports.GTMProvider=function(e){var n=e.children,u=t.useReducer(c,r({},i,e.state)),m=u[0],s=u[1];return t.useEffect((function(){!function(e){var t,a=(t={dataLayer:e.dataLayer,dataLayerName:e.dataLayerName,environment:e.environment,id:e.id},{getDataLayerScript:function(){var e,a=document.createElement("script");return a.innerHTML=(void 0===(e=t.dataLayerName)&&(e="dataLayer"),"window."+e+" = window."+e+" || []; window."+e+".push("+JSON.stringify(t.dataLayer)+")"),a},getNoScript:function(){var e=document.createElement("noscript");return e.innerHTML=function(e,t){var a="";return t&&(a="&gtm_auth="+t.gtm_auth+"&gtm_preview="+t.gtm_preview+"&gtm_cookies_win=x"),'<iframe src="https://www.googletagmanager.com/ns.html?id='+e+a+'" height="0" width="0" style="display:none;visibility:hidden" id="tag-manager"></iframe>'}(t.id,t.environment),e},getScript:function(){var e=document.createElement("script");return e.innerHTML=function(e,t,a){var r="";return a&&(r='+"&gtm_auth='+a.gtm_auth+"&gtm_preview="+a.gtm_preview+'&gtm_cookies_win=x"'),"\n    (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':\n      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],\n      j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=\n      'https://www.googletagmanager.com/gtm.js?id='+i+dl"+r+";f.parentNode.insertBefore(j,f);\n    })(window,document,'script','"+e+"','"+t+"');\n  "}(t.dataLayerName,t.id,t.environment),e}}),r=a.getDataLayerScript(),n=a.getScript(),i=a.getNoScript();document.head.insertBefore(n,document.head.childNodes[0]),document.head.insertBefore(r,document.head.childNodes[0]),document.body.insertBefore(i,document.body.childNodes[0])}({dataLayer:m.dataLayer,dataLayerName:m.dataLayerName,environment:m.environment,id:m.id})}),[m]),a.createElement(o.Provider,{value:m},a.createElement(d.Provider,{value:s},n))},exports.initialState=i,exports.sendToGTM=n,exports.useGTMDispatch=function(){var e=t.useContext(d);if(void 0===e)throw new Error("dispatchGTMEvent must be used within a GTMProvider");return e};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),n=(e=t)&&"object"==typeof e&&"default"in e?e.default:e;function a(){return(a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e}).apply(this,arguments)}var r=function(e){return window[e.dataLayerName].push(e.data)},i={dataLayer:void 0,dataLayerName:"dataLayer",environment:void 0,nonce:void 0,id:""},o=t.createContext(i),d=t.createContext(void 0);function c(e,t){return r({data:t,dataLayerName:null==e?void 0:e.dataLayerName}),e}exports.GTMContext=o,exports.GTMContextDispatch=d,exports.GTMProvider=function(e){var r=e.children,u=t.useReducer(c,a({},i,e.state)),s=u[0],m=u[1];return t.useEffect((function(){!function(e){var t,n=(t={dataLayer:e.dataLayer,dataLayerName:e.dataLayerName,environment:e.environment,nonce:e.nonce,id:e.id},{getDataLayerScript:function(){var e,n=document.createElement("script");return n.innerHTML=(void 0===(e=t.dataLayerName)&&(e="dataLayer"),"window."+e+" = window."+e+" || []; window."+e+".push("+JSON.stringify(t.dataLayer)+")"),n},getNoScript:function(){var e=document.createElement("noscript");return e.innerHTML=function(e,t){var n="";return t&&(n="&gtm_auth="+t.gtm_auth+"&gtm_preview="+t.gtm_preview+"&gtm_cookies_win=x"),'<iframe src="https://www.googletagmanager.com/ns.html?id='+e+n+'" height="0" width="0" style="display:none;visibility:hidden" id="tag-manager"></iframe>'}(t.id,t.environment),e},getScript:function(){var e=document.createElement("script");return t.nonce&&e.setAttribute("nonce",t.nonce),e.innerHTML=function(e,t,n){var a="";return n&&(a='+"&gtm_auth='+n.gtm_auth+"&gtm_preview="+n.gtm_preview+'&gtm_cookies_win=x"'),"\n    (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':\n      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],\n      j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=\n      'https://www.googletagmanager.com/gtm.js?id='+i+dl"+a+";f.parentNode.insertBefore(j,f);\n    })(window,document,'script','"+e+"','"+t+"');\n  "}(t.dataLayerName,t.id,t.environment),e}}),a=n.getDataLayerScript(),r=n.getScript(),i=n.getNoScript();document.head.insertBefore(r,document.head.childNodes[0]),document.head.insertBefore(a,document.head.childNodes[0]),document.body.insertBefore(i,document.body.childNodes[0])}({dataLayer:s.dataLayer,dataLayerName:s.dataLayerName,environment:s.environment,nonce:s.nonce,id:s.id})}),[s]),n.createElement(o.Provider,{value:s},n.createElement(d.Provider,{value:m},r))},exports.initialState=i,exports.sendToGTM=r,exports.useGTMDispatch=function(){var e=t.useContext(d);if(void 0===e)throw new Error("dispatchGTMEvent must be used within a GTMProvider");return e};
 //# sourceMappingURL=react-gtm-hook.cjs.production.min.js.map

dist/react-gtm-hook.esm.js

@@ -89,2 +89,7 @@ import React, { createContext, useReducer, useEffect, useContext } from 'react';
     var script = document.createElement('script');
+
+    if (params.nonce) {
+      script.setAttribute("nonce", params.nonce);
+    }
+
     script.innerHTML = getGTMScript(params.dataLayerName, params.id, params.environment);
@@ -105,2 +110,3 @@ return script;
  * @param environment - Specify the custom environment to use
+ * @param nonce - Server-generated nonce
  * @param id - The ID of the GTM
@@ -114,2 +120,3 @@ */
       environment = _ref.environment,
+      nonce = _ref.nonce,
       id = _ref.id;
@@ -120,2 +127,3 @@ var gtm = setupGTM({
     environment: environment,
+    nonce: nonce,
     id: id
@@ -150,2 +158,3 @@ });
   environment: undefined,
+  nonce: undefined,
   id: ''
@@ -185,2 +194,3 @@ };
       environment: store.environment,
+      nonce: store.nonce,
       id: store.id
@@ -187,0 +197,0 @@ });

dist/utils/GoogleTagManager.d.ts

@@ -7,5 +7,6 @@ import { ISendToGTM, ISnippetsParams } from '../models/GoogleTagManager';
  * @param environment - Specify the custom environment to use
+ * @param nonce - Server-generated nonce
  * @param id - The ID of the GTM
  */
-export declare const initGTM: ({ dataLayer, dataLayerName, environment, id }: ISnippetsParams) => void;
+export declare const initGTM: ({ dataLayer, dataLayerName, environment, nonce, id }: ISnippetsParams) => void;
 /**
@@ -12,0 +13,0 @@ * Function to send the events to the GTM

package.json

@@ -14,3 +14,3 @@ {
   "description": "Easily manage the Google Tag Manager via Hook",
-  "version": "2.0.8",
+  "version": "2.1.0",
   "license": "MIT",
@@ -35,19 +35,19 @@ "main": "dist/index.js",
   "devDependencies": {
-    "@babel/core": "^7.14.6",
-    "@testing-library/react": "^12.0.0",
-    "@testing-library/react-hooks": "^7.0.1",
-    "@types/react": "^17.0.14",
-    "@types/react-dom": "^17.0.9",
+    "@babel/core": "^7.16.0",
+    "@testing-library/react": "^12.1.2",
+    "@testing-library/react-hooks": "^7.0.2",
+    "@types/react": "^17.0.35",
+    "@types/react-dom": "^17.0.11",
     "all-contributors-cli": "^6.20.0",
-    "babel-jest": "^27.0.6",
+    "babel-jest": "^27.3.1",
     "babel-plugin-module-resolver": "^4.1.0",
-    "husky": "^7.0.1",
-    "prettier": "^2.3.2",
+    "husky": "^7.0.4",
+    "prettier": "^2.4.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-router-dom": "^5.2.0",
+    "react-router-dom": "^6.0.2",
     "react-test-renderer": "^17.0.2",
     "tsdx": "^0.14.1",
-    "tslib": "^2.3.0",
-    "typescript": "^4.3.5"
+    "tslib": "^2.3.1",
+    "typescript": "^4.5.2"
   },
@@ -54,0 +54,0 @@ "peerDependencies": {

README.md

@@ -159,6 +159,7 @@ <p align="center">
 | ------------- | -------- | -------- | ----------------------------------------------------------------------------------- |
-| id            | `String` | **YES**  | The container ID from the Tag Manager, it looks like: `GMT-0T0TTT`                  |
+| id            | `String` | **YES**  | The container ID from the Tag Manager, it looks like: `GTM-0T0TTT`                  |
 | dataLayer     | `Object` | **NO**   | Custom values for the dataLayer, like `{'my-init-prop': 'value'}`                   |
 | dataLayerName | `String` | **NO**   | Custom name for the dataLayer, if not passed, it will be the default: `dataLayer`   |
 | environment   | `Object` | **NO**   | Provide the `gtm_auth` and `gtm_preview` parameters to use a custom GTM environment |
+| nonce   | `String` | **NO**   | Server generated nonce. see https://developers.google.com/tag-manager/web/csp |
 
@@ -165,0 +166,0 @@ ### SentDataToGTM

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

60973

increased by3.19%

Lines of code

510

increased by3.66%

Number of lines in readme file

205

increased by0.49%

No dependency changes