ga-4-react - npm Package Compare versions

Comparing version 0.1.24 to 0.1.25

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

@@ -10,2 +10,3 @@ 'use strict';
 
+var GA4ReactGlobalIndex = '__ga4React__';
 /**
@@ -15,2 +16,3 @@ * @desc class required to manage google analitycs 4
  *  */
+
 class GA4React {
@@ -25,2 +27,14 @@ constructor(gaCode, config, additionalGaCode) {
   /**
+   * @desc output on resolve initialization
+   */
+
+
+  outputOnResolve() {
+    return {
+      pageview: this.pageview,
+      event: this.event,
+      gtag: this.gtag
+    };
+  }
+  /**
    * @desc Return main function for send ga4 events, pageview etc
@@ -33,2 +47,6 @@ * @returns {Promise<GA4ReactResolveInterface>}
     return new Promise((resolve, reject) => {
+      if (GA4React.isInitialized()) {
+        reject(new Error('GA4React is being initialized'));
+      }
+
       var head = document.getElementsByTagName('head')[0];
@@ -51,12 +69,18 @@ var scriptAsync = document.createElement('script');
         head.appendChild(scriptSync);
-        resolve({
-          pageview: this.pageview,
-          event: this.event,
-          gtag: this.gtag,
-          ga: this.ga
+        var resolved = this.outputOnResolve();
+
+        if (window.ga) {
+          Object.assign(resolved, {
+            ga: this.ga
+          });
+        }
+
+        Object.assign(window, {
+          [GA4ReactGlobalIndex]: resolved
         });
+        resolve(resolved);
       };
 
-      scriptAsync.onerror = err => {
-        reject(err);
+      scriptAsync.onerror = () => {
+        reject(new Error('GA4React initialization failed'));
       };
@@ -73,7 +97,7 @@
 
-  pageview(path) {
+  pageview(path, location, title) {
     return this.gtag('event', 'page_view', {
       page_path: path,
-      page_location: window.location,
-      page_title: document.title
+      page_location: location || window.location,
+      page_title: title || document.title
     });
@@ -121,3 +145,29 @@ }
   }
+  /**
+   * @desc ga is initialized?
+   */
 
+
+  static isInitialized() {
+    switch (typeof window[GA4ReactGlobalIndex] !== 'undefined') {
+      case true:
+        return true;
+
+      default:
+        return false;
+    }
+  }
+  /**
+   * @desc get ga4react from global
+   */
+
+
+  static getGA4React() {
+    if (GA4React.isInitialized()) {
+      return window[GA4ReactGlobalIndex];
+    } else {
+      console.error(new Error('GA4React is not initialized'));
+    }
+  }
+
 }
@@ -134,24 +184,25 @@
   React.useEffect(() => {
-    var ga4manager = new GA4React("" + code, config, additionalCode);
-    ga4manager.initialize().then(ga4 => {
-      console.log('yy', ga4);
-      setComponents(React__default.Children.map(children, (child, index) => {
-        if (!React__default.isValidElement(child)) {
-          return React__default.createElement(React__default.Fragment, null, child);
-        } else {
-          //@ts-ignore
-          if (child.type && typeof child.type.name !== 'undefined') {
-            return React__default.cloneElement(child, {
-              //@ts-ignore
-              ga4: ga4,
-              index
-            });
+    if (!GA4React.isInitialized()) {
+      var ga4manager = new GA4React("" + code, config, additionalCode);
+      ga4manager.initialize().then(ga4 => {
+        setComponents(React__default.Children.map(children, (child, index) => {
+          if (!React__default.isValidElement(child)) {
+            return React__default.createElement(React__default.Fragment, null, child);
           } else {
-            return child;
+            //@ts-ignore
+            if (child.type && typeof child.type.name !== 'undefined') {
+              return React__default.cloneElement(child, {
+                //@ts-ignore
+                ga4: ga4,
+                index
+              });
+            } else {
+              return child;
+            }
           }
-        }
-      }));
-    }, err => {
-      console.error(err);
-    });
+        }));
+      }, err => {
+        console.error(err);
+      });
+    }
   }, []);
@@ -158,0 +209,0 @@ return React__default.createElement(React__default.Fragment, null, components);

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"),a=(e=t)&&"object"==typeof e&&"default"in e?e.default:e;class n{constructor(e,t,a){this.gaCode=e,this.config=t,this.additionalGaCode=a,this.config=t||{},this.gaCode=e}initialize(){return new Promise((e,t)=>{var a=document.getElementsByTagName("head")[0],n=document.createElement("script");n.setAttribute("async",""),n.setAttribute("src","https://www.googletagmanager.com/gtag/js?id="+this.gaCode),n.onload=()=>{var t=document.createElement("script"),n="\n            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=>{n+="gtag('config', '"+e+"');"}),t.innerHTML=n,a.appendChild(t),e({pageview:this.pageview,event:this.event,gtag:this.gtag,ga:this.ga})},n.onerror=e=>{t(e)},a.appendChild(n)})}pageview(e){return this.gtag("event","page_view",{page_path:e,page_location:window.location,page_title:document.title})}event(e,t,a,n){return void 0===n&&(n=!1),this.gtag("event",e,{event_label:t,event_category:a,non_interaction:n})}ga(){return window.ga(...arguments)}gtag(){return window.gtag(...arguments)}}exports.GA4R=e=>{var{code:i,config:o,additionalCode:r,children:g}=e,[d,s]=t.useState(null);return t.useEffect(()=>{new n(""+i,o,r).initialize().then(e=>{console.log("yy",e),s(a.Children.map(g,(t,n)=>a.isValidElement(t)?t.type&&void 0!==t.type.name?a.cloneElement(t,{ga4:e,index:n}):t:a.createElement(a.Fragment,null,t)))},e=>{console.error(e)})},[]),a.createElement(a.Fragment,null,d)},exports.default=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){this.gaCode=e,this.config=t,this.additionalGaCode=i,this.config=t||{},this.gaCode=e}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.getElementsByTagName("head")[0],n=document.createElement("script");n.setAttribute("async",""),n.setAttribute("src","https://www.googletagmanager.com/gtag/js?id="+this.gaCode),n.onload=()=>{var t=document.createElement("script"),a="\n            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=>{a+="gtag('config', '"+e+"');"}),t.innerHTML=a,i.appendChild(t);var n=this.outputOnResolve();window.ga&&Object.assign(n,{ga:this.ga}),Object.assign(window,{__ga4React__:n}),e(n)},n.onerror=()=>{t(new Error("GA4React initialization failed"))},i.appendChild(n)})}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"))}}exports.GA4R=e=>{var{code:n,config:r,additionalCode:o,children:g}=e,[s,d]=t.useState(null);return t.useEffect(()=>{a.isInitialized()||new a(""+n,r,o).initialize().then(e=>{d(i.Children.map(g,(t,a)=>i.isValidElement(t)?t.type&&void 0!==t.type.name?i.cloneElement(t,{ga4:e,index:a}):t:i.createElement(i.Fragment,null,t)))},e=>{console.error(e)})},[]),i.createElement(i.Fragment,null,s)},exports.default=a;
 //# sourceMappingURL=ga-4-react.cjs.production.min.js.map

dist/ga-4-react.esm.js

 import React, { useState, useEffect } from 'react';
 
+var GA4ReactGlobalIndex = '__ga4React__';
 /**
@@ -7,2 +8,3 @@ * @desc class required to manage google analitycs 4
  *  */
+
 class GA4React {
@@ -17,2 +19,14 @@ constructor(gaCode, config, additionalGaCode) {
   /**
+   * @desc output on resolve initialization
+   */
+
+
+  outputOnResolve() {
+    return {
+      pageview: this.pageview,
+      event: this.event,
+      gtag: this.gtag
+    };
+  }
+  /**
    * @desc Return main function for send ga4 events, pageview etc
@@ -25,2 +39,6 @@ * @returns {Promise<GA4ReactResolveInterface>}
     return new Promise((resolve, reject) => {
+      if (GA4React.isInitialized()) {
+        reject(new Error('GA4React is being initialized'));
+      }
+
       var head = document.getElementsByTagName('head')[0];
@@ -43,12 +61,18 @@ var scriptAsync = document.createElement('script');
         head.appendChild(scriptSync);
-        resolve({
-          pageview: this.pageview,
-          event: this.event,
-          gtag: this.gtag,
-          ga: this.ga
+        var resolved = this.outputOnResolve();
+
+        if (window.ga) {
+          Object.assign(resolved, {
+            ga: this.ga
+          });
+        }
+
+        Object.assign(window, {
+          [GA4ReactGlobalIndex]: resolved
         });
+        resolve(resolved);
       };
 
-      scriptAsync.onerror = err => {
-        reject(err);
+      scriptAsync.onerror = () => {
+        reject(new Error('GA4React initialization failed'));
       };
@@ -65,7 +89,7 @@
 
-  pageview(path) {
+  pageview(path, location, title) {
     return this.gtag('event', 'page_view', {
       page_path: path,
-      page_location: window.location,
-      page_title: document.title
+      page_location: location || window.location,
+      page_title: title || document.title
     });
@@ -113,3 +137,29 @@ }
   }
+  /**
+   * @desc ga is initialized?
+   */
 
+
+  static isInitialized() {
+    switch (typeof window[GA4ReactGlobalIndex] !== 'undefined') {
+      case true:
+        return true;
+
+      default:
+        return false;
+    }
+  }
+  /**
+   * @desc get ga4react from global
+   */
+
+
+  static getGA4React() {
+    if (GA4React.isInitialized()) {
+      return window[GA4ReactGlobalIndex];
+    } else {
+      console.error(new Error('GA4React is not initialized'));
+    }
+  }
+
 }
@@ -126,24 +176,25 @@
   useEffect(() => {
-    var ga4manager = new GA4React("" + code, config, additionalCode);
-    ga4manager.initialize().then(ga4 => {
-      console.log('yy', ga4);
-      setComponents(React.Children.map(children, (child, index) => {
-        if (!React.isValidElement(child)) {
-          return React.createElement(React.Fragment, null, child);
-        } else {
-          //@ts-ignore
-          if (child.type && typeof child.type.name !== 'undefined') {
-            return React.cloneElement(child, {
-              //@ts-ignore
-              ga4: ga4,
-              index
-            });
+    if (!GA4React.isInitialized()) {
+      var ga4manager = new GA4React("" + code, config, additionalCode);
+      ga4manager.initialize().then(ga4 => {
+        setComponents(React.Children.map(children, (child, index) => {
+          if (!React.isValidElement(child)) {
+            return React.createElement(React.Fragment, null, child);
           } else {
-            return child;
+            //@ts-ignore
+            if (child.type && typeof child.type.name !== 'undefined') {
+              return React.cloneElement(child, {
+                //@ts-ignore
+                ga4: ga4,
+                index
+              });
+            } else {
+              return child;
+            }
           }
-        }
-      }));
-    }, err => {
-      console.error(err);
-    });
+        }));
+      }, err => {
+        console.error(err);
+      });
+    }
   }, []);
@@ -150,0 +201,0 @@ return React.createElement(React.Fragment, null, components);

dist/lib/ga4manager.d.ts

 import { ga4Config, GA4ReactInterface, GA4ReactResolveInterface, gtagAction, gtagCategory, gtagFunction, gtagLabel } from './gtagModels';
+export declare const GA4ReactGlobalIndex = "__ga4React__";
 declare global {
     interface Window {
         gtag: gtagFunction | Function;
+        ga?: Function;
+        __ga4React__: GA4ReactResolveInterface;
     }
@@ -17,2 +20,6 @@ }
     /**
+     * @desc output on resolve initialization
+     */
+    private outputOnResolve;
+    /**
      * @desc Return main function for send ga4 events, pageview etc
@@ -26,3 +33,3 @@ * @returns {Promise<GA4ReactResolveInterface>}
      */
-    pageview(path: string): any;
+    pageview(path: string | Location, location?: string | Location, title?: string): any;
     /**
@@ -46,3 +53,11 @@ * @desc set event and send to gtag
     gtag(...args: any): any;
+    /**
+     * @desc ga is initialized?
+     */
+    static isInitialized(): boolean;
+    /**
+     * @desc get ga4react from global
+     */
+    static getGA4React(): GA4ReactResolveInterface | void;
 }
 export default GA4React;

dist/lib/gtagModels.d.ts

@@ -0,1 +1,2 @@
+import GA4React from './ga4manager';
 export declare type gtagEvent = 'event' | string;
@@ -36,2 +37,7 @@ export declare type gtagAction = 'page_view' | string;
 }
+export interface GA4ReactStaticInterface {
+    new (): GA4React;
+    isInitialized(): boolean;
+    getGA4React(): GA4ReactResolveInterface | void;
+}
 /**
@@ -42,6 +48,6 @@ * @desc on resolve GA4React initial promises, return functino in this interface
 export interface GA4ReactResolveInterface {
-    pageview(path: string): any;
+    pageview(path: string | Location, location?: string | Location, title?: string): any;
     event(action: gtagAction, label: gtagLabel, data: gtagCategory, nonInteraction?: boolean): any;
     gtag(...args: any): any;
-    ga(...args: any): any;
+    ga?(...args: any): any;
 }
@@ -48,0 +54,0 @@ /**

package.json

 {
-  "version": "0.1.24",
+  "version": "0.1.25",
   "license": "MIT",
@@ -20,3 +20,4 @@ "main": "dist/index.js",
     "size": "size-limit",
-    "analyze": "size-limit --why"
+    "analyze": "size-limit --why",
+    "tsc-check": "./node_modules/typescript/bin/tsc -p ./tsconfig.json"
   },
@@ -26,3 +27,3 @@ "peerDependencies": {},
     "hooks": {
-      "pre-commit": "tsdx lint"
+      "pre-commit": "npm run lint && npm run test && npm run tsc-check"
     }
@@ -52,2 +53,3 @@ },
     "@size-limit/preset-small-lib": "^4.7.0",
+    "@testing-library/react": "^11.1.2",
     "@types/jest": "^26.0.15",
@@ -61,2 +63,3 @@ "@types/jsdom": "^16.2.5",
     "react": "^17.0.1",
+    "react-dom": "^17.0.1",
     "size-limit": "^4.7.0",
@@ -63,0 +66,0 @@ "tsdx": "^0.14.1",

No alert changes

Improved metrics

Total package byte prevSize

60768

increased by26.2%

Number of package files

22

increased by10%

Lines of code

856

increased by29.5%

Worsened metrics

Dev dependency count

15

increased by15.38%

No dependency changes