ga-4-react - npm Package Compare versions

Comparing version 0.1.265 to 0.1.266

dist/components/GA4RComponents.d.ts

 import React from 'react';
-export interface IGAReactConfig {
-    send_page_view: boolean;
-    groups: string;
-}
+import { GA4Config, GA4ManagerOptionsInterface } from '../models/gtagModels';
 export interface IGA4R {
     code: string;
     timeout?: number;
-    config?: IGAReactConfig;
+    config?: GA4Config;
     additionalCode?: Array<string>;
     children?: any;
+    options?: GA4ManagerOptionsInterface;
 }
 export declare const GA4R: React.FC<IGA4R>;
 export default GA4R;

dist/components/withTracker.d.ts

 import React from 'react';
-import { ga4Config } from '../lib/gtagModels';
+import { GA4Config, GA4ManagerOptionsInterface } from '../models/gtagModels';
 export interface GA4WithTrackerComponentInterface {
@@ -8,7 +8,8 @@ path: string | Location;
     gaCode?: string;
-    gaConfig?: ga4Config | object;
+    gaConfig?: GA4Config | object;
     additionalCode?: Array<string>;
     timeout?: number;
+    options?: GA4ManagerOptionsInterface;
 }
 export declare function withTracker(MyComponent: React.FC<any>): React.FC<GA4WithTrackerComponentInterface>;
 export default withTracker;

dist/ga-4-react.cjs.development.js

@@ -17,13 +17,22 @@ 'use strict';
 class GA4React {
-  constructor(gaCode, config, additionalGaCode, timeout) {
+  constructor(gaCode, gaConfig, additionalGaCode, timeout, options) {
     this.gaCode = gaCode;
-    this.config = config;
+    this.gaConfig = gaConfig;
     this.additionalGaCode = additionalGaCode;
     this.timeout = timeout;
+    this.options = options;
     this.scriptSyncId = 'ga4ReactScriptSync';
     this.scriptAsyncId = 'ga4ReactScriptAsync';
-    this.config = config || {};
+    this.nonce = '';
+    this.gaConfig = gaConfig ? gaConfig : {};
     this.gaCode = gaCode;
     this.timeout = timeout || 5000;
     this.additionalGaCode = additionalGaCode;
+
+    if (this.options) {
+      var {
+        nonce
+      } = this.options;
+      this.nonce = nonce || '';
+    }
   }
@@ -65,3 +74,2 @@ /**
       scriptAsync.setAttribute('async', '');
-      scriptAsync.setAttribute('crossorigin', 'anonymous');
       scriptAsync.setAttribute('src', "https://www.googletagmanager.com/gtag/js?id=" + this.gaCode);
@@ -85,7 +93,12 @@
         scriptSync.setAttribute('id', this.scriptSyncId);
-        var scriptHTML = "window.dataLayer = window.dataLayer || [];\n        function gtag(){dataLayer.push(arguments);};\n        gtag('js', new Date());\n        gtag('config', '" + this.gaCode + "', " + JSON.stringify(this.config) + ");";
 
+        if (this.nonce && typeof this.nonce === 'string' && this.nonce.length > 0) {
+          scriptSync.setAttribute('nonce', this.nonce);
+        }
+
+        var scriptHTML = "window.dataLayer = window.dataLayer || [];\n        function gtag(){dataLayer.push(arguments);};\n        gtag('js', new Date());\n        gtag('config', '" + this.gaCode + "', " + JSON.stringify(this.gaConfig) + ");";
+
         if (this.additionalGaCode) {
           this.additionalGaCode.forEach(code => {
-            scriptHTML += "gtag('config', '" + code + "', " + JSON.stringify(this.config) + ");";
+            scriptHTML += "\ngtag('config', '" + code + "', " + JSON.stringify(this.gaConfig) + ");";
           });
@@ -97,9 +110,2 @@ }
         var resolved = this.outputOnResolve();
-
-        if (window.ga) {
-          Object.assign(resolved, {
-            ga: this.ga
-          });
-        }
-
         Object.assign(window, {
@@ -175,12 +181,2 @@ [GA4ReactGlobalIndex]: resolved
   /**
-   * @desc direct access to ga
-   * @param args
-   */
-
-
-  ga() {
-    //@ts-ignore
-    return window.ga(...arguments);
-  }
-  /**
    * @desc direct access to gtag
@@ -249,3 +245,4 @@ * @param args
     additionalCode,
-    children
+    children,
+    options
   } = _ref;
@@ -255,3 +252,3 @@ var [components, setComponents] = React.useState(null);
     if (!GA4React.isInitialized()) {
-      var ga4manager = new GA4React("" + code, config, additionalCode, timeout);
+      var ga4manager = new GA4React("" + code, config, additionalCode, timeout, options);
       ga4manager.initialize().then(ga4 => {
@@ -307,3 +304,4 @@ outputGA4(children, setComponents, ga4);
       gaConfig,
-      gaAdditionalCode
+      gaAdditionalCode,
+      options
     } = props;
@@ -323,3 +321,3 @@ React.useEffect(() => {
         case false:
-          var ga4react = new GA4React("" + gaCode, gaConfig, gaAdditionalCode, gaTimeout);
+          var ga4react = new GA4React("" + gaCode, gaConfig, gaAdditionalCode, gaTimeout, options);
           ga4react.initialize().then(ga4 => {
@@ -326,0 +324,0 @@ ga4.pageview(path, location, title);

dist/ga-4-react.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),i=(e=t)&&"object"==typeof e&&"default"in e?e.default:e;class a{constructor(e,t,i,a){this.gaCode=e,this.config=t,this.additionalGaCode=i,this.timeout=a,this.scriptSyncId="ga4ReactScriptSync",this.scriptAsyncId="ga4ReactScriptAsync",this.config=t||{},this.gaCode=e,this.timeout=a||5e3,this.additionalGaCode=i}outputOnResolve(){return{pageview:this.pageview,event:this.event,gtag:this.gtag}}initialize(){return new Promise((e,t)=>{a.isInitialized()&&t(new Error("GA4React is being initialized"));var i=document.getElementById(this.scriptAsyncId);i&&i.remove();var n=document.getElementsByTagName("head")[0],r=document.createElement("script");r.setAttribute("id",this.scriptAsyncId),r.setAttribute("async",""),r.setAttribute("crossorigin","anonymous"),r.setAttribute("src","https://www.googletagmanager.com/gtag/js?id="+this.gaCode),r.onload=()=>{var t=document.getElementById(this.scriptSyncId);t&&t.remove();var i=document.getElementById(this.scriptSyncId);i&&i.remove();var a=document.createElement("script");a.setAttribute("id",this.scriptSyncId);var r="window.dataLayer = window.dataLayer || [];\n        function gtag(){dataLayer.push(arguments);};\n        gtag('js', new Date());\n        gtag('config', '"+this.gaCode+"', "+JSON.stringify(this.config)+");";this.additionalGaCode&&this.additionalGaCode.forEach(e=>{r+="gtag('config', '"+e+"', "+JSON.stringify(this.config)+");"}),a.innerHTML=r,n.appendChild(a);var s=this.outputOnResolve();window.ga&&Object.assign(s,{ga:this.ga}),Object.assign(window,{__ga4React__:s}),e(s)},r.onerror=e=>{if("string"==typeof e)t("GA4React intialization failed "+e);else{var i=new Error;i.name="GA4React intialization failed",i.message=JSON.stringify(e,["message","arguments","type","name"]),t(i)}};var s=()=>{switch(document.readyState){case"interactive":case"complete":a.isInitialized()||(n.appendChild(r),document.removeEventListener("readystatechange",s))}};document.addEventListener("readystatechange",s),setTimeout(()=>{t(new Error("GA4React Timeout"))},this.timeout)})}pageview(e,t,i){return this.gtag("event","page_view",{page_path:e,page_location:t||window.location,page_title:i||document.title})}event(e,t,i,a){return void 0===a&&(a=!1),this.gtag("event",e,{event_label:t,event_category:i,non_interaction:a})}ga(){return window.ga(...arguments)}gtag(){return window.gtag(...arguments)}static isInitialized(){switch(void 0!==window.__ga4React__){case!0:return!0;default:return!1}}static getGA4React(){if(a.isInitialized())return window.__ga4React__;console.error(new Error("GA4React is not initialized"))}}var n=(e,t,a)=>{t(i.Children.map(e,(e,t)=>i.isValidElement(e)?e.type&&void 0!==e.type.name?i.cloneElement(e,{ga4:a,index:t}):e:i.createElement(i.Fragment,null,e)))};exports.GA4R=e=>{var{code:r,timeout:s,config:o,additionalCode:c,children:d}=e,[g,l]=t.useState(null);return t.useEffect(()=>{if(a.isInitialized()){var e=a.getGA4React();e&&n(d,l,e)}else new a(""+r,o,c,s).initialize().then(e=>{n(d,l,e)},e=>{console.error(e)})},[]),i.createElement(i.Fragment,null,g)},exports.GA4React=a,exports.default=a,exports.useGA4React=(e,i,n,r)=>{var[s,o]=t.useState(void 0);return t.useEffect(()=>{if(e)switch(a.isInitialized()){case!1:new a(""+e,i,n,r).initialize().then(e=>{o(e)},e=>{console.error(e)});break;case!0:o(a.getGA4React())}else o(a.getGA4React())},[e]),s},exports.withTracker=function(e){return n=>{var{path:r,location:s,title:o,gaCode:c,gaTimeout:d,gaConfig:g,gaAdditionalCode:l}=n;return t.useEffect(()=>{switch(a.isInitialized()){case!0:var e=a.getGA4React();e&&e.pageview(r,s,o);break;default:case!1:new a(""+c,g,l,d).initialize().then(e=>{e.pageview(r,s,o)},e=>{console.error(e)})}}),i.createElement(e,Object.assign({},n))}};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),i=(e=t)&&"object"==typeof e&&"default"in e?e.default:e;class a{constructor(e,t,i,a,n){if(this.gaCode=e,this.gaConfig=t,this.additionalGaCode=i,this.timeout=a,this.options=n,this.scriptSyncId="ga4ReactScriptSync",this.scriptAsyncId="ga4ReactScriptAsync",this.nonce="",this.gaConfig=t||{},this.gaCode=e,this.timeout=a||5e3,this.additionalGaCode=i,this.options){var{nonce:r}=this.options;this.nonce=r||""}}outputOnResolve(){return{pageview:this.pageview,event:this.event,gtag:this.gtag}}initialize(){return new Promise((e,t)=>{a.isInitialized()&&t(new Error("GA4React is being initialized"));var i=document.getElementById(this.scriptAsyncId);i&&i.remove();var n=document.getElementsByTagName("head")[0],r=document.createElement("script");r.setAttribute("id",this.scriptAsyncId),r.setAttribute("async",""),r.setAttribute("src","https://www.googletagmanager.com/gtag/js?id="+this.gaCode),r.onload=()=>{var t=document.getElementById(this.scriptSyncId);t&&t.remove();var i=document.getElementById(this.scriptSyncId);i&&i.remove();var a=document.createElement("script");a.setAttribute("id",this.scriptSyncId),this.nonce&&"string"==typeof this.nonce&&this.nonce.length>0&&a.setAttribute("nonce",this.nonce);var r="window.dataLayer = window.dataLayer || [];\n        function gtag(){dataLayer.push(arguments);};\n        gtag('js', new Date());\n        gtag('config', '"+this.gaCode+"', "+JSON.stringify(this.gaConfig)+");";this.additionalGaCode&&this.additionalGaCode.forEach(e=>{r+="\ngtag('config', '"+e+"', "+JSON.stringify(this.gaConfig)+");"}),a.innerHTML=r,n.appendChild(a);var s=this.outputOnResolve();Object.assign(window,{__ga4React__:s}),e(s)},r.onerror=e=>{if("string"==typeof e)t("GA4React intialization failed "+e);else{var i=new Error;i.name="GA4React intialization failed",i.message=JSON.stringify(e,["message","arguments","type","name"]),t(i)}};var s=()=>{switch(document.readyState){case"interactive":case"complete":a.isInitialized()||(n.appendChild(r),document.removeEventListener("readystatechange",s))}};document.addEventListener("readystatechange",s),setTimeout(()=>{t(new Error("GA4React Timeout"))},this.timeout)})}pageview(e,t,i){return this.gtag("event","page_view",{page_path:e,page_location:t||window.location,page_title:i||document.title})}event(e,t,i,a){return void 0===a&&(a=!1),this.gtag("event",e,{event_label:t,event_category:i,non_interaction:a})}gtag(){return window.gtag(...arguments)}static isInitialized(){switch(void 0!==window.__ga4React__){case!0:return!0;default:return!1}}static getGA4React(){if(a.isInitialized())return window.__ga4React__;console.error(new Error("GA4React is not initialized"))}}var n=(e,t,a)=>{t(i.Children.map(e,(e,t)=>i.isValidElement(e)?e.type&&void 0!==e.type.name?i.cloneElement(e,{ga4:a,index:t}):e:i.createElement(i.Fragment,null,e)))};exports.GA4R=e=>{var{code:r,timeout:s,config:o,additionalCode:c,children:d,options:g}=e,[l,u]=t.useState(null);return t.useEffect(()=>{if(a.isInitialized()){var e=a.getGA4React();e&&n(d,u,e)}else new a(""+r,o,c,s,g).initialize().then(e=>{n(d,u,e)},e=>{console.error(e)})},[]),i.createElement(i.Fragment,null,l)},exports.GA4React=a,exports.default=a,exports.useGA4React=(e,i,n,r)=>{var[s,o]=t.useState(void 0);return t.useEffect(()=>{if(e)switch(a.isInitialized()){case!1:new a(""+e,i,n,r).initialize().then(e=>{o(e)},e=>{console.error(e)});break;case!0:o(a.getGA4React())}else o(a.getGA4React())},[e]),s},exports.withTracker=function(e){return n=>{var{path:r,location:s,title:o,gaCode:c,gaTimeout:d,gaConfig:g,gaAdditionalCode:l,options:u}=n;return t.useEffect(()=>{switch(a.isInitialized()){case!0:var e=a.getGA4React();e&&e.pageview(r,s,o);break;default:case!1:new a(""+c,g,l,d,u).initialize().then(e=>{e.pageview(r,s,o)},e=>{console.error(e)})}}),i.createElement(e,Object.assign({},n))}};
 //# sourceMappingURL=ga-4-react.cjs.production.min.js.map

dist/ga-4-react.esm.js

@@ -10,13 +10,22 @@ import React, { useState, useEffect } from 'react';
 class GA4React {
-  constructor(gaCode, config, additionalGaCode, timeout) {
+  constructor(gaCode, gaConfig, additionalGaCode, timeout, options) {
     this.gaCode = gaCode;
-    this.config = config;
+    this.gaConfig = gaConfig;
     this.additionalGaCode = additionalGaCode;
     this.timeout = timeout;
+    this.options = options;
     this.scriptSyncId = 'ga4ReactScriptSync';
     this.scriptAsyncId = 'ga4ReactScriptAsync';
-    this.config = config || {};
+    this.nonce = '';
+    this.gaConfig = gaConfig ? gaConfig : {};
     this.gaCode = gaCode;
     this.timeout = timeout || 5000;
     this.additionalGaCode = additionalGaCode;
+
+    if (this.options) {
+      var {
+        nonce
+      } = this.options;
+      this.nonce = nonce || '';
+    }
   }
@@ -58,3 +67,2 @@ /**
       scriptAsync.setAttribute('async', '');
-      scriptAsync.setAttribute('crossorigin', 'anonymous');
       scriptAsync.setAttribute('src', "https://www.googletagmanager.com/gtag/js?id=" + this.gaCode);
@@ -78,7 +86,12 @@
         scriptSync.setAttribute('id', this.scriptSyncId);
-        var scriptHTML = "window.dataLayer = window.dataLayer || [];\n        function gtag(){dataLayer.push(arguments);};\n        gtag('js', new Date());\n        gtag('config', '" + this.gaCode + "', " + JSON.stringify(this.config) + ");";
 
+        if (this.nonce && typeof this.nonce === 'string' && this.nonce.length > 0) {
+          scriptSync.setAttribute('nonce', this.nonce);
+        }
+
+        var scriptHTML = "window.dataLayer = window.dataLayer || [];\n        function gtag(){dataLayer.push(arguments);};\n        gtag('js', new Date());\n        gtag('config', '" + this.gaCode + "', " + JSON.stringify(this.gaConfig) + ");";
+
         if (this.additionalGaCode) {
           this.additionalGaCode.forEach(code => {
-            scriptHTML += "gtag('config', '" + code + "', " + JSON.stringify(this.config) + ");";
+            scriptHTML += "\ngtag('config', '" + code + "', " + JSON.stringify(this.gaConfig) + ");";
           });
@@ -90,9 +103,2 @@ }
         var resolved = this.outputOnResolve();
-
-        if (window.ga) {
-          Object.assign(resolved, {
-            ga: this.ga
-          });
-        }
-
         Object.assign(window, {
@@ -168,12 +174,2 @@ [GA4ReactGlobalIndex]: resolved
   /**
-   * @desc direct access to ga
-   * @param args
-   */
-
-
-  ga() {
-    //@ts-ignore
-    return window.ga(...arguments);
-  }
-  /**
    * @desc direct access to gtag
@@ -242,3 +238,4 @@ * @param args
     additionalCode,
-    children
+    children,
+    options
   } = _ref;
@@ -248,3 +245,3 @@ var [components, setComponents] = useState(null);
     if (!GA4React.isInitialized()) {
-      var ga4manager = new GA4React("" + code, config, additionalCode, timeout);
+      var ga4manager = new GA4React("" + code, config, additionalCode, timeout, options);
       ga4manager.initialize().then(ga4 => {
@@ -300,3 +297,4 @@ outputGA4(children, setComponents, ga4);
       gaConfig,
-      gaAdditionalCode
+      gaAdditionalCode,
+      options
     } = props;
@@ -316,3 +314,3 @@ useEffect(() => {
         case false:
-          var ga4react = new GA4React("" + gaCode, gaConfig, gaAdditionalCode, gaTimeout);
+          var ga4react = new GA4React("" + gaCode, gaConfig, gaAdditionalCode, gaTimeout, options);
           ga4react.initialize().then(ga4 => {
@@ -319,0 +317,0 @@ ga4.pageview(path, location, title);

dist/hooks/useGA4React.d.ts

@@ -1,2 +0,2 @@
-import { ga4Config, GA4ReactResolveInterface } from '../lib/gtagModels';
-export declare const useGA4React: (gaCode?: string | undefined, gaConfig?: object | ga4Config | undefined, gaAdditionalCode?: string[] | undefined, gaTimeout?: number | undefined) => GA4ReactResolveInterface | void;
+import { GA4Config, GA4ReactResolveInterface } from '../models/gtagModels';
+export declare const useGA4React: (gaCode?: string | undefined, gaConfig?: object | GA4Config | undefined, gaAdditionalCode?: string[] | undefined, gaTimeout?: number | undefined) => GA4ReactResolveInterface | void;

dist/lib/ga4manager.d.ts

@@ -1,2 +0,2 @@
-import { ga4Config, GA4ReactInterface, GA4ReactResolveInterface, gtagAction, gtagCategory, gtagFunction, gtagLabel } from './gtagModels';
+import { GA4Config, GA4ManagerOptionsInterface, GA4ReactInterface, GA4ReactResolveInterface, gtagAction, gtagCategory, gtagFunction, gtagLabel } from '../models/gtagModels';
 export declare const GA4ReactGlobalIndex = "__ga4React__";
@@ -6,3 +6,2 @@ declare global {
         gtag: gtagFunction | Function;
-        ga?: Function;
         __ga4React__: GA4ReactResolveInterface;
@@ -17,8 +16,10 @@ }
     private gaCode;
-    private config?;
+    private gaConfig?;
     private additionalGaCode?;
     private timeout?;
+    private options?;
     private scriptSyncId;
     private scriptAsyncId;
-    constructor(gaCode: string, config?: object | ga4Config | undefined, additionalGaCode?: string[] | undefined, timeout?: number | undefined);
+    private nonce;
+    constructor(gaCode: string, gaConfig?: GA4Config | undefined, additionalGaCode?: string[] | undefined, timeout?: number | undefined, options?: GA4ManagerOptionsInterface | undefined);
     /**
@@ -47,7 +48,2 @@ * @desc output on resolve initialization
     /**
-     * @desc direct access to ga
-     * @param args
-     */
-    ga(...args: any): any;
-    /**
      * @desc direct access to gtag
@@ -54,0 +50,0 @@ * @param args

package.json

 {
-  "version": "0.1.265",
+  "version": "0.1.266",
   "license": "MIT",
@@ -4,0 +4,0 @@ "main": "dist/index.js",

No alert changes

Improved metrics

Total package byte prevSize

98639

increased by2.51%

Lines of code

1203

increased by1.52%

No dependency changes