@uxf/analytics 10.1.0

package/README.md

@@ -0,0 +1,64 @@
+# @uxf/analytics
+[![npm](https://img.shields.io/npm/v/@uxf/analytics)](https://www.npmjs.com/package/@uxf/analytics)
+[![size](https://img.shields.io/bundlephobia/min/@uxf/analytics)](https://www.npmjs.com/package/@uxf/analytics)
+[![quality](https://img.shields.io/npms-io/quality-score/@uxf/analytics)](https://www.npmjs.com/package/@uxf/analytics)
+[![license](https://img.shields.io/npm/l/@uxf/analytics)](https://www.npmjs.com/package/@uxf/analytics)
+
+## Installation
+
+```bash
+yarn add @uxf/analytics
+```
+
+```bash
+npm install @uxf/analytics
+```
+
+## Cookie consent
+
+### Store consent to cookie
+
+```ts
+import { storeConsentToCookie } from "@uxf/analytics/consent";
+
+storeConsentToCookie({
+    analytics_storage: true,
+    ad_storage: false,
+    personalization_storage: false,
+});
+```
+
+### Read consent from cookie
+
+```ts
+import { readConsentFromCookie } from "@uxf/analytics/consent";
+
+const consent = readConsentFromCookie();
+```
+
+## GTM
+
+### Initialize GTM
+
+This reads the consent from cookie and initializes the GTM dataLayer.
+
+```tsx
+import { GtmScript } from "@uxf/analytics/gtm";
+
+// in your head component
+<GtmScript gtmId="GTM-YOURID" />
+```
+
+### Update GTM consent
+
+This stores the consent to cookie and updates the GTM dataLayer.
+
+```tsx
+import { updateGtmConsent } from "@uxf/analytics/gtm";
+
+updateGtmConsent({
+    analytics_storage: true,
+    ad_storage: false,
+    personalization_storage: false,
+});
+```

package/consent/index.d.ts

@@ -0,0 +1 @@
+export * from "../src/consent";

package/consent/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("../src/consent"), exports);

package/gtm/index.d.ts

@@ -0,0 +1,3 @@
+export * from "../src/gtm/gmt-script";
+export type * from "../src/gtm/types";
+export * from "../src/gtm/utils";

package/gtm/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("../src/gtm/gmt-script"), exports);
+__exportStar(require("../src/gtm/utils"), exports);

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@uxf/analytics",
+  "version": "10.1.0",
+  "description": "",
+  "scripts": {
+    "build": "tsc -P tsconfig.json",
+    "typecheck": "tsc --noEmit --skipLibCheck"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@uxf/core": "10.0.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.2"
+  }
+}

package/src/consent/index.d.ts

@@ -0,0 +1,7 @@
+export type CookiesConsentType = {
+    analytics_storage?: boolean;
+    ad_storage?: boolean;
+    personalization_storage?: boolean;
+};
+export declare const storeConsentToCookie: (consent: CookiesConsentType) => void;
+export declare const readConsentFromCookie: (ctx?: any) => CookiesConsentType;

package/src/consent/index.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.readConsentFromCookie = exports.storeConsentToCookie = void 0;
+const cookie_1 = require("@uxf/core/cookie");
+const COOKIE_NAME = "cookieConsent";
+const storeConsentToCookie = (consent) => {
+    if (typeof window === "undefined") {
+        throw new Error("The 'storeConsentToCookie' method cannot be called on server side.");
+    }
+    cookie_1.Cookie.create().set(COOKIE_NAME, btoa(JSON.stringify(consent)));
+};
+exports.storeConsentToCookie = storeConsentToCookie;
+const readConsentFromCookie = (ctx) => {
+    const cookieConsent = cookie_1.Cookie.create(ctx).get(COOKIE_NAME);
+    return JSON.parse(atob(cookieConsent || "") || "{}");
+};
+exports.readConsentFromCookie = readConsentFromCookie;

package/src/gtm/gmt-script.d.ts

@@ -0,0 +1,6 @@
+import { FC } from "react";
+interface Props {
+    gtmId: string;
+}
+export declare const GtmScript: FC<Props>;
+export {};

package/src/gtm/gmt-script.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GtmScript = void 0;
+const useIsMounted_1 = require("@uxf/core/hooks/useIsMounted");
+const react_1 = __importDefault(require("react"));
+const consent_1 = require("../consent");
+const GtmScript = (props) => {
+    const isMounted = (0, useIsMounted_1.useIsMounted)();
+    if (!isMounted) {
+        return null;
+    }
+    const decodedCookie = (0, consent_1.readConsentFromCookie)();
+    const defaultGtmCookie = `
+        window.dataLayer = window.dataLayer || [];
+        if (typeof gtag !== "function") { function gtag(){dataLayer.push(arguments)}; }
+        gtag("consent", "default", {
+            'analytics_storage': '${decodedCookie.analytics_storage ? "granted" : "denied"}',
+            'ad_storage': '${decodedCookie.ad_storage ? "granted" : "denied"}',
+            'personalization_storage': '${decodedCookie.personalization_storage ? "granted" : "denied"}'}
+        );`;
+    return (react_1.default.createElement("script", { dangerouslySetInnerHTML: {
+            __html: defaultGtmCookie +
+                `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.defer=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','${props.gtmId}');`,
+        } }));
+};
+exports.GtmScript = GtmScript;

package/src/gtm/types.d.ts

@@ -0,0 +1,15 @@
+export type ConsentType = "granted" | "denied";
+export interface GtmConsentData {
+    analytics_storage: ConsentType;
+    ad_storage: ConsentType;
+    personalization_storage: ConsentType;
+}
+export interface GtmDataLayer {
+    push: (gtmEventData: GtmConsentData) => void;
+}
+declare global {
+    interface Window {
+        dataLayer: GtmDataLayer;
+        gtag: (command: "consent", event: "default" | "update", params: GtmConsentData) => void;
+    }
+}

package/src/gtm/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/src/gtm/utils.d.ts

@@ -0,0 +1,2 @@
+import { CookiesConsentType } from "../consent";
+export declare const updateGtmConsent: (consent: CookiesConsentType) => void;

package/src/gtm/utils.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.updateGtmConsent = void 0;
+const consent_1 = require("../consent");
+const updateGtmConsent = (consent) => {
+    (0, consent_1.storeConsentToCookie)(consent);
+    window.dataLayer = window.dataLayer || [];
+    if (typeof window.gtag !== "function") {
+        window.gtag = function () {
+            // eslint-disable-next-line prefer-rest-params
+            window.dataLayer.push(arguments);
+        };
+    }
+    window.gtag("consent", "update", {
+        analytics_storage: consent.analytics_storage ? "granted" : "denied",
+        ad_storage: consent.ad_storage ? "granted" : "denied",
+        personalization_storage: consent.personalization_storage ? "granted" : "denied",
+    });
+};
+exports.updateGtmConsent = updateGtmConsent;