gtm-module - npm Package Compare versions

Comparing version 1.0.7 to 1.0.8

dist/index.d.ts

@@ -1,2 +0,2 @@
-export default class GoogleTagManager {
+export default class GTM {
     private gtmId;
@@ -11,6 +11,8 @@ private serverSideDomain;
     dataLayerPush(obj: dataLayerObj, resetPush?: boolean): void;
-    remove(): void;
     private static resetPush;
 }
 declare global {
+    type dataLayerObj = {
+        [key: string]: string | number | boolean | dataLayerObj;
+    };
     interface Window {
@@ -20,12 +22,1 @@ dataLayer: dataLayerObj[];
 }
-interface dataLayerObj {
-    [parameter: string]: unknown;
-}
-interface gtmConfig {
-    gtmId: string;
-    serverSideDomain?: string;
-    resetDataLayerObjects?: boolean;
-    sanitizeDataLayerObjects?: boolean;
-    defer?: boolean;
-}
-export {};

dist/index.js

 import sanitizeObj from './util/sanitizeObj.js';
 import resetDataLayerObj from './util/resetDataLayerObj.js';
 import gtmCode from './util/gtmCode.js';
-var GoogleTagManager = /** @class */ (function () {
-    function GoogleTagManager(initGtm) {
+var GTM = /** @class */ (function () {
+    function GTM(initGtm) {
         this.initialized = false;
         var gtmId = initGtm.gtmId, serverSideDomain = initGtm.serverSideDomain, resetDataLayerObjects = initGtm.resetDataLayerObjects, sanitizeDataLayerObjects = initGtm.sanitizeDataLayerObjects, defer = initGtm.defer;
-        this.gtmId = typeof gtmId === "string" ? gtmId.trim() : undefined;
-        this.serverSideDomain = typeof serverSideDomain === "string" ? serverSideDomain.trim() : '';
-        this.resetDataLayer = typeof resetDataLayerObjects === "boolean" ? resetDataLayerObjects : false;
-        this.sanitizeDataLayer = typeof sanitizeDataLayerObjects === "boolean" ? sanitizeDataLayerObjects : false;
+        this.gtmId = typeof gtmId === 'string' ? gtmId.trim() : undefined;
+        this.serverSideDomain = typeof serverSideDomain === 'string' ? serverSideDomain.trim() : '';
+        this.resetDataLayer = typeof resetDataLayerObjects === 'boolean' ? resetDataLayerObjects : false;
+        this.sanitizeDataLayer =
+            typeof sanitizeDataLayerObjects === 'boolean' ? sanitizeDataLayerObjects : false;
         this.defer = typeof defer === 'boolean' ? defer : false;
     }
-    GoogleTagManager.prototype.initialize = function () {
+    GTM.prototype.initialize = function () {
         if (!this.initialized) {
@@ -35,12 +36,2 @@ if (this.gtmId) {
                     window.document.head.appendChild(script);
-                    var noScript = document.createElement('noscript');
-                    noScript.id = "gtm-snippet-noscript";
-                    var iframe = document.createElement('iframe');
-                    iframe.src = "https://".concat(this.serverSideDomain || 'www.googletagmanager.com', "/ns.html?id=").concat(this.gtmId);
-                    iframe.style.display = "none";
-                    iframe.style.visibility = "hidden";
-                    iframe.height = "0";
-                    iframe.width = "0";
-                    noScript.appendChild(iframe);
-                    window.document.body.appendChild(noScript);
                     this.initialized = true;
@@ -57,3 +48,3 @@ }
     };
-    GoogleTagManager.prototype.dataLayerPush = function (obj, resetPush) {
+    GTM.prototype.dataLayerPush = function (obj, resetPush) {
         window.dataLayer = window.dataLayer || [];
@@ -67,3 +58,3 @@ if (this.sanitizeDataLayer) {
                 var newObjMethodConfig = JSON.parse(JSON.stringify(obj));
-                GoogleTagManager.resetPush(newObjMethodConfig);
+                GTM.resetPush(newObjMethodConfig);
             }
@@ -73,22 +64,6 @@ }
             var newObjInstanceConfig = JSON.parse(JSON.stringify(obj));
-            GoogleTagManager.resetPush(newObjInstanceConfig);
+            GTM.resetPush(newObjInstanceConfig);
         }
     };
-    GoogleTagManager.prototype.remove = function () {
-        if (this.initialized) {
-            try {
-                var gtmSnippet = window.document.querySelector("#gtm-snippet");
-                var parentElement = gtmSnippet.parentNode;
-                parentElement.removeChild(gtmSnippet);
-                this.initialized = false;
-            }
-            catch (err) {
-                console.error('Could not remove Google Tag Manager script');
-            }
-        }
-        else {
-            console.warn('Google Tag Manager script is not initialized');
-        }
-    };
-    GoogleTagManager.resetPush = function (obj) {
+    GTM.resetPush = function (obj) {
         var proceed = resetDataLayerObj(obj);
@@ -99,5 +74,5 @@ if (proceed) {
     };
-    return GoogleTagManager;
+    return GTM;
 }());
-export default GoogleTagManager;
+export default GTM;
 //# sourceMappingURL=index.js.map

dist/util/isObject.js

 export default function isObject(checkVariable) {
-    if (typeof checkVariable === 'object' && !Array.isArray(checkVariable) && checkVariable !== null && checkVariable !== undefined) {
+    if (typeof checkVariable === 'object' &&
+        !Array.isArray(checkVariable) &&
+        checkVariable !== null &&
+        checkVariable !== undefined) {
         return true;
@@ -4,0 +7,0 @@ }

dist/util/resetDataLayerObj.js

@@ -1,2 +0,2 @@
-import isObject from "./isObject.js";
+import isObject from './isObject.js';
 function resetObj(obj) {
@@ -3,0 +3,0 @@ Object.keys(obj).forEach(function (key) {

dist/util/sanitize.js

@@ -5,9 +5,9 @@ export default (function (text) {
     return text
-        .normalize("NFD")
-        .replace(/[\u0300-\u036f]/g, "")
+        .normalize('NFD')
+        .replace(/[\u0300-\u036f]/g, '')
         .trim()
-        .replace(allSpaces, "-")
-        .replace(allLineBreaks, "-")
+        .replace(allSpaces, '-')
+        .replace(allLineBreaks, '-')
         .toLowerCase();
 });
 //# sourceMappingURL=sanitize.js.map

dist/util/sanitizeObj.js

@@ -12,4 +12,4 @@ var __assign = (this && this.__assign) || function () {
 };
-import sanitize from "./sanitize.js";
-import isObject from "./isObject.js";
+import sanitize from './sanitize.js';
+import isObject from './isObject.js';
 function sanitizeObj(obj) {
@@ -16,0 +16,0 @@ Object.keys(obj).forEach(function (key) {

package.json

 {
   "name": "gtm-module",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "Facilitates the usage of Google Tag Manager. Supports Google Tag Manager Server Side loading.",
@@ -11,5 +11,7 @@ "main": "./dist/index.js",
     "test": "jest --coverage --env=jsdom",
+    "test:dev": "jest --coverage --watch --env=jsdom",
     "lint": "eslint",
-    "release": "release-it",
-    "prepare": "husky install"
+    "release": "release-it --no-git.requireUpstream",
+    "prepare": "husky install",
+    "format": "prettier --write ."
   },
@@ -46,7 +48,12 @@ "repository": {
     "eslint": "^8.27.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-jest": "^27.2.2",
+    "eslint-plugin-prettier": "^4.2.1",
     "husky": "^8.0.2",
     "jest": "^29.3.1",
     "jest-environment-jsdom": "^29.3.1",
+    "lint-staged": "^13.2.2",
+    "prettier": "^2.8.8",
     "release-it": "^15.5.0"
   }
 }

README.md

@@ -8,20 +8,22 @@ # `gtm-module`
 ```javascript
-const gtmConfig = { 
-    gtmId: 'GTM-1234567', // required 
-    serverSideDomain: 'data.mydomain.com', // optional 
-    resetDataLayerObjects: true, // optional
-    sanitizeDataLayerObjects: true, // optional
-    defer: true // optional 
+import GTM from 'gtm-module'
+
+const gtmConfig = {
+  gtmId: 'GTM-1234567', // required
+  serverSideDomain: 'data.mydomain.com', // optional
+  resetDataLayerObjects: true, // optional
+  sanitizeDataLayerObjects: true, // optional
+  defer: true // optional
 }
 
-const gtm = new GTM(gtmConfig);
+const gtm = new GTM(gtmConfig)
 ```
 
-| Option | Required? | Type | Default Value | Description | 
-| ------ | --------- | ---- | ------------- | ----------- | 
-| gtmId | Yes | String | - | Google Tag Manager Client Side container ID | 
-| serverSideDomain | No | String | - | Google Tag Manager Server Side domain. If provided, the google tag manager client side library will be loaded from your GTM server side container. In order for this to work properly, you must have the GTM Client Side setted up as a client on your GTMss container, along with the gtmId you want to load. | 
-| resetDataLayerObjects | No | Boolean | false | If true all the last dataLayer object properties will be pushed again with null value. This helps to keep the dataLayer parameters controlled across different pushes. It will only take effect if an object is pushed |
-| sanitizeDataLayerObjects | No | Boolean | false | If true it sanitizes the object values. It is a good practice to normalize characters to ease future data treatments. It will only take effect if an object is pushed
-| defer | No | Boolean | False | If true it will load the google tag manager script as a defer script instead of async |
+| Option                   | Required? | Type    | Default Value | Description                                                                                                                                                                                                                                                                                                    |
+| ------------------------ | --------- | ------- | ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| gtmId                    | Yes       | String  | -             | Google Tag Manager Client Side container ID                                                                                                                                                                                                                                                                    |
+| serverSideDomain         | No        | String  | -             | Google Tag Manager Server Side domain. If provided, the google tag manager client side library will be loaded from your GTM server side container. In order for this to work properly, you must have the GTM Client Side setted up as a client on your GTMss container, along with the gtmId you want to load. |
+| resetDataLayerObjects    | No        | Boolean | false         | If true all the last dataLayer object properties will be pushed again with null value. This helps to keep the dataLayer parameters controlled across different pushes. It will only take effect if an object is pushed                                                                                         |
+| sanitizeDataLayerObjects | No        | Boolean | false         | If true it sanitizes the object values. It is a good practice to normalize characters to ease future data treatments. It will only take effect if an object is pushed                                                                                                                                          |
+| defer                    | No        | Boolean | False         | If true it will load the google tag manager script as a defer script instead of async                                                                                                                                                                                                                          |
 
@@ -31,10 +33,8 @@ ## 2. Methods
 ```javascript
-const gtm = new GTM(gtmConfig);
-
 gtm.initialize() // load the container
 
-const dataLayerObject = { 
-    event: 'click',
-    element: 'cta-bottom',
-    text: 'buy-now'
+const dataLayerObject = {
+  event: 'click',
+  element: 'cta-bottom',
+  text: 'buy-now'
 }
@@ -46,18 +46,7 @@
 gtm.dataLayerPush(dataLayerObject, true) // push the object to the dataLayer and then push another object reseting the properties first sent. It has priority over the initial configuration 'resetDataLayerObjects'.
-
-if (userOptedOut) { 
-    gtm.remove() // remove the GTM container
-}
 ```
 
-| Method | Parameters | Description | 
-| ------ | ---------- | ----------- | 
-| initialize | - | Load the Google Tag Manager Client Side container | 
-| dataLayerPush | object, resetPush | Pushes the object to the dataLayer. If the second parameter is passed, it overwrites the initial `resetDataLayerObjects` configuration for this push | 
-| remove | - | Removes the container | 
-
-## Colaborating 
-
-In order to collaborate, please link an issue with the pull request.
-
-All the tests must pass in order to merge on **`master`**.
+| Method        | Parameters        | Description                                                                                                                                          |
+| ------------- | ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
+| initialize    | -                 | Load the Google Tag Manager Client Side container                                                                                                    |
+| dataLayerPush | object, resetPush | Pushes the object to the dataLayer. If the second parameter is passed, it overwrites the initial `resetDataLayerObjects` configuration for this push |

No alert changes

Worsened metrics

Total package byte prevSize

19322

decreased by-2.59%

Dev dependency count

16

increased by45.45%

Lines of code

180

decreased by-14.69%

Number of lines in readme file

50

decreased by-16.67%

No dependency changes