ga-4-react - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

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

@@ -5,2 +5,7 @@ 'use strict';
 
+function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+
+var React = require('react');
+var React__default = _interopDefault(React);
+
 /**
@@ -28,3 +33,3 @@ * @desc class required to manage google analitycs 4
         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) + ");";
+        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) + ");";
 
@@ -39,3 +44,6 @@ if (this.additionalGaCode) {
         head.appendChild(scriptSync);
-        resolve(this);
+        resolve({
+          pageview: this.pageview,
+          gtag: this.gtag
+        });
       };
@@ -79,4 +87,29 @@
 
-exports.GA4React = GA4React;
+var GA4R = (_ref) => {
+  var {
+    code,
+    config,
+    additionalCode,
+    children
+  } = _ref;
+  var [ga4fn, setGA4Fn] = React.useState();
+  React.useEffect(() => {
+    var ga4manager = new GA4React("" + code, config, additionalCode);
+    ga4manager.initialize().then(ga4 => {
+      setGA4Fn(ga4);
+    }, err => {
+      console.error(err);
+    });
+  }, []);
+  var childrenWithProps = React__default.Children.map(children, (child, index) => {
+    return React__default.cloneElement(child, {
+      ga4: ga4fn,
+      index
+    });
+  });
+  return React__default.createElement("div", null, childrenWithProps);
+};
+
+exports.GA4R = GA4R;
 exports.default = GA4React;
 //# 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});class t{constructor(t,e,a){this.gaCode=t,this.config=e,this.additionalGaCode=a,this.config=e||{},this.gaCode=t}initialize(){return new Promise((t,e)=>{var a=document.getElementsByTagName("head")[0],i=document.createElement("script");i.setAttribute("async",""),i.setAttribute("src","https://www.googletagmanager.com/gtag/js?id="+this.gaCode),i.onload=()=>{var e=document.createElement("script"),i="\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(t=>{i+="gtag('config', '"+t+"');"}),e.innerHTML=i,a.appendChild(e),t(this)},i.onerror=t=>{e(t)},a.appendChild(i)})}pageview(t){window.gtag("event","page_view",{page_path:t,page_location:window.location,page_title:document.title})}gtag(){for(var t=arguments.length,e=new Array(t),a=0;a<t;a++)e[a]=arguments[a];return window.gtag(e)}}exports.GA4React=t,exports.default=t;
+"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 i{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],i=document.createElement("script");i.setAttribute("async",""),i.setAttribute("src","https://www.googletagmanager.com/gtag/js?id="+this.gaCode),i.onload=()=>{var t=document.createElement("script"),i="\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=>{i+="gtag('config', '"+e+"');"}),t.innerHTML=i,a.appendChild(t),e({pageview:this.pageview,gtag:this.gtag})},i.onerror=e=>{t(e)},a.appendChild(i)})}pageview(e){window.gtag("event","page_view",{page_path:e,page_location:window.location,page_title:document.title})}gtag(){for(var e=arguments.length,t=new Array(e),a=0;a<e;a++)t[a]=arguments[a];return window.gtag(t)}}exports.GA4R=e=>{var{code:n,config:o,additionalCode:r,children:g}=e,[d,s]=t.useState();t.useEffect(()=>{new i(""+n,o,r).initialize().then(e=>{s(e)},e=>{console.error(e)})},[]);var c=a.Children.map(g,(e,t)=>a.cloneElement(e,{ga4:d,index:t}));return a.createElement("div",null,c)},exports.default=i;
 //# sourceMappingURL=ga-4-react.cjs.production.min.js.map

dist/ga-4-react.esm.js

@@ -0,1 +1,3 @@
+import React, { useState, useEffect } from 'react';
+
 /**
@@ -23,3 +25,3 @@ * @desc class required to manage google analitycs 4
         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) + ");";
+        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) + ");";
 
@@ -34,3 +36,6 @@ if (this.additionalGaCode) {
         head.appendChild(scriptSync);
-        resolve(this);
+        resolve({
+          pageview: this.pageview,
+          gtag: this.gtag
+        });
       };
@@ -74,4 +79,29 @@
 
+var GA4R = (_ref) => {
+  var {
+    code,
+    config,
+    additionalCode,
+    children
+  } = _ref;
+  var [ga4fn, setGA4Fn] = useState();
+  useEffect(() => {
+    var ga4manager = new GA4React("" + code, config, additionalCode);
+    ga4manager.initialize().then(ga4 => {
+      setGA4Fn(ga4);
+    }, err => {
+      console.error(err);
+    });
+  }, []);
+  var childrenWithProps = React.Children.map(children, (child, index) => {
+    return React.cloneElement(child, {
+      ga4: ga4fn,
+      index
+    });
+  });
+  return React.createElement("div", null, childrenWithProps);
+};
+
 export default GA4React;
-export { GA4React };
+export { GA4R };
 //# sourceMappingURL=ga-4-react.esm.js.map

dist/index.d.ts

@@ -1,35 +0,14 @@
-declare global {
-    interface Window {
-        gtag: Function;
-    }
+import React from 'react';
+import GA4React from './ga4manager';
+export interface IGAReactConfig {
+    send_page_view: boolean;
+    groups: string;
 }
-/**
- * @interface
- */
-export interface GA4ReactInterface {
-    initialize(): Promise<any>;
-    pageview(path: string): void;
-    gtag(...args: any): any;
+export interface IGA4R {
+    code: string;
+    config?: IGAReactConfig;
+    additionalCode?: Array<string>;
+    children?: any;
 }
-/**
- * @desc class required to manage google analitycs 4
- * @class GA4React
- *  */
-export declare class GA4React implements GA4ReactInterface {
-    private gaCode;
-    private config?;
-    private additionalGaCode?;
-    constructor(gaCode: string, config?: object | undefined, additionalGaCode?: string[] | undefined);
-    initialize(): Promise<GA4ReactInterface>;
-    /**
-     * @desc set new page or send pageview event
-     * @param path
-     */
-    pageview(path: string): void;
-    /**
-     * @desc direct access to gtag
-     * @param args
-     */
-    gtag(...args: any): any;
-}
+export declare const GA4R: React.FC<IGA4R>;
 export default GA4React;

package.json

 {
-  "version": "0.1.1",
+  "version": "0.1.2",
   "license": "MIT",
@@ -49,5 +49,10 @@ "main": "dist/index.js",
     "@size-limit/preset-small-lib": "^4.7.0",
+    "@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",
     "husky": "^4.3.0",
     "jsdom": "^16.4.0",
+    "react": "^17.0.1",
     "size-limit": "^4.7.0",
@@ -57,3 +62,9 @@ "tsdx": "^0.14.1",
     "typescript": "^4.0.5"
-  }
+  },
+  "keywords": [
+    "react",
+    "google",
+    "analytics",
+    "ga"
+  ]
 }

README.md

 # GA4React
 
-### Google Analytics 4 React
+## Google Analytics 4 React
 
-Example
+Example without components
 
@@ -18,1 +18,22 @@ ```
 ```
+
+---
+
+## Inject GA4React function in props of childrens
+
+Example with custom components 'GA4R'
+
+```
+const Test: React.FC<any> = ({ ga4 }) => {
+  return <>{"=> " + JSON.stringify(ga4)}</>;
+};
+
+
+<GA4R code="CODICE">
+    <Test></Test>
+</GA4R>
+```
+
+## RENDER:
+
+`=> {...}`

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

32530

increased by43.65%

Number of package files

14

increased by16.67%

Lines of code

364

increased by46.77%

Number of lines in readme file

39

increased by116.67%

Worsened metrics

Dev dependency count

13

increased by62.5%

Number of low quality alerts

3

increased by50%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes