ga-4-react - npm Package Compare versions

Comparing version 0.1.25 to 0.1.26

dist/components/GA4RComponents.d.ts

@@ -8,2 +8,3 @@ import React from 'react';
     code: string;
+    timeout?: number;
     config?: IGAReactConfig;
@@ -10,0 +11,0 @@ additionalCode?: Array<string>;

dist/components/withTracker.d.ts

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

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

@@ -17,8 +17,12 @@ 'use strict';
 class GA4React {
-  constructor(gaCode, config, additionalGaCode) {
+  constructor(gaCode, config, additionalGaCode, timeout) {
     this.gaCode = gaCode;
     this.config = config;
     this.additionalGaCode = additionalGaCode;
+    this.timeout = timeout;
+    this.scriptSyncId = 'ga4ReactScriptSync';
     this.config = config || {};
     this.gaCode = gaCode;
+    this.timeout = timeout || 5000;
+    this.additionalGaCode = additionalGaCode;
   }
@@ -55,8 +59,15 @@ /**
       scriptAsync.onload = () => {
+        var target = document.getElementById(this.scriptSyncId);
+
+        if (target) {
+          target.remove();
+        }
+
         var scriptSync = document.createElement('script');
-        var scriptHTML = "\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) + ");";
+        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.additionalGaCode) {
           this.additionalGaCode.forEach(code => {
-            scriptHTML += "gtag('config', '" + code + "');";
+            scriptHTML += "gtag('config', '" + code + "', " + JSON.stringify(this.config) + ");";
           });
@@ -85,3 +96,19 @@ }
 
-      head.appendChild(scriptAsync);
+      var onChangeReadyState = () => {
+        switch (document.readyState) {
+          case 'interactive':
+          case 'complete':
+            if (!GA4React.isInitialized()) {
+              head.appendChild(scriptAsync);
+              document.removeEventListener('readystatechange', onChangeReadyState);
+            }
+
+            break;
+        }
+      };
+
+      document.addEventListener('readystatechange', onChangeReadyState);
+      setTimeout(() => {
+        reject(new Error('GA4React Timeout'));
+      }, this.timeout);
     });
@@ -171,5 +198,25 @@ }
 
+var outputGA4 = (children, setComponents, ga4) => {
+  setComponents(React__default.Children.map(children, (child, index) => {
+    if (!React__default.isValidElement(child)) {
+      return React__default.createElement(React__default.Fragment, null, child);
+    } //@ts-ignore
+
+
+    if (child.type && typeof child.type.name !== 'undefined') {
+      return React__default.cloneElement(child, {
+        //@ts-ignore
+        ga4: ga4,
+        index
+      });
+    } else {
+      return child;
+    }
+  }));
+};
+
 var GA4R = (_ref) => {
   var {
     code,
+    timeout,
     config,
@@ -182,23 +229,14 @@ additionalCode,
     if (!GA4React.isInitialized()) {
-      var ga4manager = new GA4React("" + code, config, additionalCode);
+      var ga4manager = new GA4React("" + code, config, additionalCode, timeout);
       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 {
-            //@ts-ignore
-            if (child.type && typeof child.type.name !== 'undefined') {
-              return React__default.cloneElement(child, {
-                //@ts-ignore
-                ga4: ga4,
-                index
-              });
-            } else {
-              return child;
-            }
-          }
-        }));
+        outputGA4(children, setComponents, ga4);
       }, err => {
         console.error(err);
       });
+    } else {
+      var ga4 = GA4React.getGA4React();
+
+      if (ga4) {
+        outputGA4(children, setComponents, ga4);
+      }
     }
@@ -209,6 +247,69 @@ }, []);
 
-var GA4R$1 = GA4R;
+var useGA4React = (gaCode, gaConfig, gaAdditionalCode, gaTimeout) => {
+  var [ga4, setGA4] = React.useState(undefined);
+  React.useEffect(() => {
+    if (gaCode) {
+      switch (GA4React.isInitialized()) {
+        case false:
+          var ga4react = new GA4React("" + gaCode, gaConfig, gaAdditionalCode, gaTimeout);
+          ga4react.initialize().then(ga4 => {
+            setGA4(ga4);
+          }, err => {
+            console.error(err);
+          });
+          break;
 
-exports.GA4R = GA4R$1;
+        case true:
+          setGA4(GA4React.getGA4React());
+          break;
+      }
+    } else {
+      setGA4(GA4React.getGA4React());
+    }
+  }, [gaCode]);
+  return ga4;
+};
+
+function withTracker(MyComponent) {
+  return props => {
+    var {
+      path,
+      location,
+      title,
+      gaCode,
+      gaTimeout,
+      gaConfig,
+      gaAdditionalCode
+    } = props;
+    React.useEffect(() => {
+      switch (GA4React.isInitialized()) {
+        case true:
+          var ga4 = GA4React.getGA4React();
+
+          if (ga4) {
+            ga4.pageview(path, location, title);
+          }
+
+          break;
+
+        default:
+        case false:
+          var ga4react = new GA4React("" + gaCode, gaConfig, gaAdditionalCode, gaTimeout);
+          ga4react.initialize().then(ga4 => {
+            ga4.pageview(path, location, title);
+          }, err => {
+            console.error(err);
+          });
+          break;
+      }
+    });
+    return React__default.createElement(MyComponent, Object.assign({}, props));
+  };
+}
+
+exports.GA4R = GA4R;
+exports.GA4React = GA4React;
 exports.default = GA4React;
+exports.useGA4React = useGA4React;
+exports.withTracker = withTracker;
 //# sourceMappingURL=ga-4-react.cjs.development.js.map

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){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;
+"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.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.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.getElementById(this.scriptSyncId);t&&t.remove();var a=document.createElement("script");a.setAttribute("id",this.scriptSyncId);var 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+"', "+JSON.stringify(this.config)+");"}),a.innerHTML=n,i.appendChild(a);var r=this.outputOnResolve();window.ga&&Object.assign(r,{ga:this.ga}),Object.assign(window,{__ga4React__:r}),e(r)},n.onerror=()=>{t(new Error("GA4React initialization failed"))};var r=()=>{switch(document.readyState){case"interactive":case"complete":a.isInitialized()||(i.appendChild(n),document.removeEventListener("readystatechange",r))}};document.addEventListener("readystatechange",r),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:o,config:s,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,s,c,o).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[o,s]=t.useState(void 0);return t.useEffect(()=>{if(e)switch(a.isInitialized()){case!1:new a(""+e,i,n,r).initialize().then(e=>{s(e)},e=>{console.error(e)});break;case!0:s(a.getGA4React())}else s(a.getGA4React())},[e]),o},exports.withTracker=function(e){return n=>{var{path:r,location:o,title:s,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,o,s);break;default:case!1:new a(""+c,g,l,d).initialize().then(e=>{e.pageview(r,o,s)},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,8 +10,12 @@ import React, { useState, useEffect } from 'react';
 class GA4React {
-  constructor(gaCode, config, additionalGaCode) {
+  constructor(gaCode, config, additionalGaCode, timeout) {
     this.gaCode = gaCode;
     this.config = config;
     this.additionalGaCode = additionalGaCode;
+    this.timeout = timeout;
+    this.scriptSyncId = 'ga4ReactScriptSync';
     this.config = config || {};
     this.gaCode = gaCode;
+    this.timeout = timeout || 5000;
+    this.additionalGaCode = additionalGaCode;
   }
@@ -48,8 +52,15 @@ /**
       scriptAsync.onload = () => {
+        var target = document.getElementById(this.scriptSyncId);
+
+        if (target) {
+          target.remove();
+        }
+
         var scriptSync = document.createElement('script');
-        var scriptHTML = "\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) + ");";
+        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.additionalGaCode) {
           this.additionalGaCode.forEach(code => {
-            scriptHTML += "gtag('config', '" + code + "');";
+            scriptHTML += "gtag('config', '" + code + "', " + JSON.stringify(this.config) + ");";
           });
@@ -78,3 +89,19 @@ }
 
-      head.appendChild(scriptAsync);
+      var onChangeReadyState = () => {
+        switch (document.readyState) {
+          case 'interactive':
+          case 'complete':
+            if (!GA4React.isInitialized()) {
+              head.appendChild(scriptAsync);
+              document.removeEventListener('readystatechange', onChangeReadyState);
+            }
+
+            break;
+        }
+      };
+
+      document.addEventListener('readystatechange', onChangeReadyState);
+      setTimeout(() => {
+        reject(new Error('GA4React Timeout'));
+      }, this.timeout);
     });
@@ -164,5 +191,25 @@ }
 
+var outputGA4 = (children, setComponents, ga4) => {
+  setComponents(React.Children.map(children, (child, index) => {
+    if (!React.isValidElement(child)) {
+      return React.createElement(React.Fragment, null, child);
+    } //@ts-ignore
+
+
+    if (child.type && typeof child.type.name !== 'undefined') {
+      return React.cloneElement(child, {
+        //@ts-ignore
+        ga4: ga4,
+        index
+      });
+    } else {
+      return child;
+    }
+  }));
+};
+
 var GA4R = (_ref) => {
   var {
     code,
+    timeout,
     config,
@@ -175,23 +222,14 @@ additionalCode,
     if (!GA4React.isInitialized()) {
-      var ga4manager = new GA4React("" + code, config, additionalCode);
+      var ga4manager = new GA4React("" + code, config, additionalCode, timeout);
       ga4manager.initialize().then(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
-              });
-            } else {
-              return child;
-            }
-          }
-        }));
+        outputGA4(children, setComponents, ga4);
       }, err => {
         console.error(err);
       });
+    } else {
+      var ga4 = GA4React.getGA4React();
+
+      if (ga4) {
+        outputGA4(children, setComponents, ga4);
+      }
     }
@@ -202,6 +240,66 @@ }, []);
 
-var GA4R$1 = GA4R;
+var useGA4React = (gaCode, gaConfig, gaAdditionalCode, gaTimeout) => {
+  var [ga4, setGA4] = useState(undefined);
+  useEffect(() => {
+    if (gaCode) {
+      switch (GA4React.isInitialized()) {
+        case false:
+          var ga4react = new GA4React("" + gaCode, gaConfig, gaAdditionalCode, gaTimeout);
+          ga4react.initialize().then(ga4 => {
+            setGA4(ga4);
+          }, err => {
+            console.error(err);
+          });
+          break;
 
+        case true:
+          setGA4(GA4React.getGA4React());
+          break;
+      }
+    } else {
+      setGA4(GA4React.getGA4React());
+    }
+  }, [gaCode]);
+  return ga4;
+};
+
+function withTracker(MyComponent) {
+  return props => {
+    var {
+      path,
+      location,
+      title,
+      gaCode,
+      gaTimeout,
+      gaConfig,
+      gaAdditionalCode
+    } = props;
+    useEffect(() => {
+      switch (GA4React.isInitialized()) {
+        case true:
+          var ga4 = GA4React.getGA4React();
+
+          if (ga4) {
+            ga4.pageview(path, location, title);
+          }
+
+          break;
+
+        default:
+        case false:
+          var ga4react = new GA4React("" + gaCode, gaConfig, gaAdditionalCode, gaTimeout);
+          ga4react.initialize().then(ga4 => {
+            ga4.pageview(path, location, title);
+          }, err => {
+            console.error(err);
+          });
+          break;
+      }
+    });
+    return React.createElement(MyComponent, Object.assign({}, props));
+  };
+}
+
 export default GA4React;
-export { GA4R$1 as GA4R };
+export { GA4R, GA4React, useGA4React, withTracker };
 //# sourceMappingURL=ga-4-react.esm.js.map

dist/hooks/useGA4React.d.ts

@@ -1,3 +0,2 @@
-import { GA4ReactResolveInterface } from '../lib/gtagModels';
-export declare const useGA4React: (gaCode?: string | undefined) => GA4ReactResolveInterface | void;
-export default useGA4React;
+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;

dist/index.d.ts

@@ -1,4 +0,6 @@
-import GA4React from './lib/ga4manager';
-import GA4RComponents from './components/GA4RComponents';
-export declare const GA4R: typeof GA4RComponents;
+import { GA4React } from './lib/ga4manager';
+import { GA4R } from './components/GA4RComponents';
+import { useGA4React } from './hooks/useGA4React';
+import { withTracker } from './components/withTracker';
+export { GA4React, GA4R, useGA4React, withTracker };
 export default GA4React;

dist/lib/ga4manager.d.ts

@@ -18,3 +18,5 @@ import { ga4Config, GA4ReactInterface, GA4ReactResolveInterface, gtagAction, gtagCategory, gtagFunction, gtagLabel } from './gtagModels';
     private additionalGaCode?;
-    constructor(gaCode: string, config?: object | ga4Config | undefined, additionalGaCode?: string[] | undefined);
+    private timeout?;
+    private scriptSyncId;
+    constructor(gaCode: string, config?: object | ga4Config | undefined, additionalGaCode?: string[] | undefined, timeout?: number | undefined);
     /**
@@ -21,0 +23,0 @@ * @desc output on resolve initialization

package.json

 {
-  "version": "0.1.25",
+  "version": "0.1.26",
   "license": "MIT",
@@ -26,3 +26,3 @@ "main": "dist/index.js",
     "hooks": {
-      "pre-commit": "npm run lint && npm run test && npm run tsc-check"
+      "pre-commit": "npm run lint && npm run tsc-check"
     }
@@ -51,9 +51,12 @@ },
   "devDependencies": {
-    "@size-limit/preset-small-lib": "^4.7.0",
-    "@testing-library/react": "^11.1.2",
+    "@size-limit/preset-small-lib": "^4.9.0",
+    "@testing-library/jest-dom": "^5.11.8",
+    "@testing-library/react": "^11.2.2",
+    "@testing-library/user-event": "^12.2.2",
     "@types/jest": "^26.0.15",
     "@types/jsdom": "^16.2.5",
-    "@types/node": "^14.14.7",
-    "@types/react": "^16.9.56",
-    "@types/react-dom": "^16.9.9",
+    "@types/node": "^14.14.10",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "@types/react-test-renderer": "^17.0.0",
     "husky": "^4.3.0",
@@ -63,6 +66,8 @@ "jsdom": "^16.4.0",
     "react-dom": "^17.0.1",
-    "size-limit": "^4.7.0",
+    "react-test-renderer": "^16.8.6",
+    "size-limit": "^4.9.0",
+    "ts-jest": "^26.4.4",
     "tsdx": "^0.14.1",
     "tslib": "^2.0.3",
-    "typescript": "^4.0.5"
+    "typescript": "^4.1.2"
   },
@@ -75,2 +80,2 @@ "keywords": [
   ]
-}
+}

README.md

@@ -12,6 +12,11 @@ # GA4React - Google Analytics 4 React
 
-const ga4react = new GA4React('YOUR GA CODE');
+const ga4react = new GA4React(
+'YOUR GA CODE',
+{ /* ga custom config, optional */ },
+[ /* additional code, optional */ ],
+5000 /* timeout, optional, defaults is 5000 */
+});
 ga4react.initialize().then((ga4) => {
   ga4.pageview('path')
-  ga4.gtag('event','pageview','path') // or your custiom gtag event
+  ga4.gtag('event','pageview','path') // or your custom gtag event
 },(err) => {
@@ -42,8 +47,33 @@ console.error(err)
 
-console log results:
+console.log results:
 
-`{pageview: ƒ, gtag: ƒ}`
+`{pageview: ƒ, gtag: ƒ, event: ƒ}`
 
 ---
 
+## Components withTracker
+
+path prop value is sended with pageview
+
+```
+const Tracker = withTracker(props => <>{JSON.stringify(props)}</>);
+...
+ <Tracker path="myCustomPath" gaCode="GA-CODE"></Tracker>
+
+```
+
+---
+
+## useGA4React Hook
+
+```
+const Example = () => {
+  const ga4React = useGA4React(); // GA CODE, optional, if empty try to get from globals
+  return <>{JSON.stringify(ga4React)}</>;
+};
+
+```
+
+---
+
 <a href="https://www.buymeacoffee.com/unrealmanu" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>

No alert changes

Improved metrics

Total package byte prevSize

88163

increased by45.08%

Lines of code

1121

increased by30.96%

Number of lines in readme file

78

increased by62.5%

Worsened metrics

Dev dependency count

20

increased by33.33%

No dependency changes