Merge pull request #1068 from datopian/analytics

[core][m]: Add analytics component to the core packages

package-lock.json

@@ -48297,7 +48297,7 @@
     },
     "packages/components": {
       "name": "@portaljs/components",
-      "version": "0.4.0",
+      "version": "0.5.3",
       "dependencies": {
         "@githubocto/flat-ui": "^0.14.1",
         "@heroicons/react": "^2.0.17",
@@ -48734,7 +48734,7 @@
     },
     "packages/core": {
       "name": "@portaljs/core",
-      "version": "1.0.6",
+      "version": "1.0.8",
       "license": "MIT",
       "dependencies": {
         "@docsearch/react": "^3.3.3",
@@ -48773,7 +48773,7 @@
     },
     "packages/remark-embed": {
       "name": "@portaljs/remark-embed",
-      "version": "1.0.4",
+      "version": "1.0.5",
       "license": "MIT",
       "dependencies": {
         "unist-util-visit": "^4.1.1"
@@ -48781,7 +48781,7 @@
     },
     "packages/remark-wiki-link": {
       "name": "@portaljs/remark-wiki-link",
-      "version": "1.1.0",
+      "version": "1.1.2",
       "license": "MIT",
       "dependencies": {
         "mdast-util-to-markdown": "^1.5.0",

packages/components/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @portaljs/components
 
+## 0.5.3
+
+### Patch Changes
+
+- [#1066](https://github.com/datopian/portaljs/pull/1066) [`dd03a493`](https://github.com/datopian/portaljs/commit/dd03a493beca5459d1ef447b2df505609fc64e95) Thanks [@Gutts-n](https://github.com/Gutts-n)! - Created Iframe component
+
+## 0.5.2
+
+### Patch Changes
+
+- [#1063](https://github.com/datopian/portaljs/pull/1063) [`b13e3ade`](https://github.com/datopian/portaljs/commit/b13e3ade3ccefe7dffe84f824bdedd3e512ce499) Thanks [@Gutts-n](https://github.com/Gutts-n)! - Created auto zoom configuration for the map component
+
+## 0.5.1
+
+### Patch Changes
+
+- [#1061](https://github.com/datopian/portaljs/pull/1061) [`4ddfc112`](https://github.com/datopian/portaljs/commit/4ddfc1126a3f0b8137ea47a08a36c56b7373b8f6) Thanks [@Gutts-n](https://github.com/Gutts-n)! - Created the style property in the Map component
+
+## 0.5.0
+
+### Minor Changes
+
+- [#1055](https://github.com/datopian/portaljs/pull/1055) [`712f4a3b`](https://github.com/datopian/portaljs/commit/712f4a3b0f074e654879bb75059f51e06b422b32) Thanks [@Gutts-n](https://github.com/Gutts-n)! - Creation of BucketViewer component to show the data of public buckets
+
+- [#1057](https://github.com/datopian/portaljs/pull/1057) [`61c750b7`](https://github.com/datopian/portaljs/commit/61c750b7e11fe52bf04d25f192440ee1bb307404) Thanks [@Gutts-n](https://github.com/Gutts-n)! - Exporting BucketViewer to be accessed out of the folder
+
 ## 0.4.0
 
 ### Minor Changes

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portaljs/components",
-  "version": "0.4.0",
+  "version": "0.5.3",
   "type": "module",
   "description": "https://portaljs.org",
   "keywords": [
@@ -29,6 +29,8 @@
     "@githubocto/flat-ui": "^0.14.1",
     "@heroicons/react": "^2.0.17",
     "@planet/maps": "^8.1.0",
+    "@react-pdf-viewer/core": "3.6.0",
+    "@react-pdf-viewer/default-layout": "3.6.0",
     "@tanstack/react-table": "^8.8.5",
     "ag-grid-react": "^30.0.4",
     "chroma-js": "^2.4.2",
@@ -37,6 +39,7 @@
     "next-mdx-remote": "^4.4.1",
     "ol": "^7.4.0",
     "papaparse": "^5.4.1",
+    "pdfjs-dist": "2.15.349",
     "postcss-url": "^10.1.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -47,9 +50,6 @@
     "vega": "5.25.0",
     "vega-lite": "5.1.0",
     "vitest": "^0.31.4",
-    "@react-pdf-viewer/core": "3.6.0",
-    "@react-pdf-viewer/default-layout": "3.6.0",
-    "pdfjs-dist": "2.15.349",
     "xlsx": "^0.18.5"
   },
   "devDependencies": {

packages/components/src/components/BucketViewer.tsx

@@ -0,0 +1,81 @@
+import { useEffect, useState } from 'react';
+import LoadingSpinner from './LoadingSpinner';
+
+export interface BucketViewerProps {
+  domain: string;
+  suffix?: string;
+  className?: string;
+  dataMapperFn: (rawData: Response) => Promise<BucketViewerData[]>;
+}
+
+export interface BucketViewerData {
+  fileName: string;
+  downloadFileUri: string;
+  dateProps?: {
+    date: Date;
+    dateFormatter: (date: Date) => string;
+  };
+}
+
+export function BucketViewer({
+  domain,
+  suffix,
+  dataMapperFn,
+  className,
+}: BucketViewerProps) {
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [bucketFiles, setBucketFiles] = useState<BucketViewerData[]>([]);
+  suffix = suffix ?? '/';
+
+  useEffect(() => {
+    setIsLoading(true);
+    fetch(`${domain}${suffix}`)
+      .then((res) => dataMapperFn(res))
+      .then((data) => setBucketFiles(data))
+      .finally(() => setIsLoading(false));
+  }, [domain, suffix]);
+  return isLoading ? (
+    <div className="w-full flex items-center justify-center h-[300px]">
+      <LoadingSpinner />
+    </div>
+  ) : bucketFiles ? (
+    <>
+      {...bucketFiles?.map((data, i) => (
+        <ul
+          onClick={() => {
+            const anchorId = `download_anchor_${i}`;
+            const a: HTMLAnchorElement =
+              (document.getElementById(anchorId) as HTMLAnchorElement | null) ??
+              document.createElement('a');
+            a.id = anchorId;
+            if (a.download) a.click();
+            else {
+              setIsLoading(true);
+              fetch(data.downloadFileUri)
+                .then((res) => res.blob())
+                .then((res) => {
+                  a.href = URL.createObjectURL(res);
+                  a.download = res.name ?? data.fileName;
+                  document.body.appendChild(a);
+                  a.click();
+                })
+                .finally(() => setIsLoading(false));
+            }
+          }}
+          key={i}
+          className={`${
+            className ??
+            'mb-2 border-b-[2px] border-b-[red] hover:cursor-pointer'
+          }`}
+        >
+          <li>{data.fileName}</li>
+          {data.dateProps ? (
+            <li>{data.dateProps.dateFormatter(data.dateProps.date)}</li>
+          ) : (
+            <></>
+          )}
+        </ul>
+      ))}
+    </>
+  ) : null;
+}

packages/components/src/components/Iframe.tsx

@@ -0,0 +1,14 @@
+import { CSSProperties } from "react";
+
+export interface IframeProps {
+  url: string;
+  style?: CSSProperties;
+}
+
+export function Iframe({
+  url, style
+}: IframeProps) {
+  return (
+    <iframe src={url} style={style ?? { width: `100%`, height: `100%` }}></iframe>
+  );
+}

packages/components/src/components/Map.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { CSSProperties, useEffect, useState } from 'react';
 import LoadingSpinner from './LoadingSpinner';
 import loadData from '../lib/loadData';
 import chroma from 'chroma-js';
@@ -21,15 +21,19 @@ export type MapProps = {
       ending: string;
     };
     tooltip?:
-      | {
-          propNames: string[];
-        }
-      | boolean;
+    | {
+      propNames: string[];
+    }
+    | boolean;
     _id?: number;
   }[];
   title?: string;
   center?: { latitude: number | undefined; longitude: number | undefined };
   zoom?: number;
+  style?: CSSProperties;
+  autoZoomConfiguration?: {
+    layerName: string
+  }
 };
 
 export function Map({
@@ -44,6 +48,8 @@ export function Map({
   center = { latitude: 45, longitude: 45 },
   zoom = 2,
   title = '',
+  style = {},
+  autoZoomConfiguration = undefined,
 }: MapProps) {
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [layersData, setLayersData] = useState<any>([]);
@@ -96,6 +102,7 @@ export function Map({
       zoom={zoom}
       scrollWheelZoom={false}
       className="h-80 w-full"
+      style={style ?? {}}
       // @ts-ignore
       whenReady={(map: any) => {
         //  Enable zoom using scroll wheel
@@ -104,17 +111,35 @@ export function Map({
         //  Create the title box
         var info = new L.Control() as any;
 
-        info.onAdd = function () {
+        info.onAdd = function() {
           this._div = L.DomUtil.create('div', 'info');
           this.update();
           return this._div;
         };
 
-        info.update = function () {
+        info.update = function() {
           this._div.innerHTML = `<h4 style="font-weight: 600; background: #f9f9f9; padding: 5px; border-radius: 5px; color: #464646;">${title}</h4>`;
         };
 
         if (title) info.addTo(map.target);
+        if(!autoZoomConfiguration) return;
+
+        let layerToZoomBounds = L.latLngBounds(L.latLng(0, 0), L.latLng(0, 0));
+
+        layers.forEach((layer) => {
+          if(layer.name === autoZoomConfiguration.layerName) {
+            const data = layersData.find(
+              (layerData) => layerData.name === layer.name
+            )?.data;
+
+            if (data) {
+              layerToZoomBounds = L.geoJSON(data).getBounds();
+              return;
+            }
+          }
+        });
+
+        map.target.fitBounds(layerToZoomBounds);
       }}
     >
       <TileLayer

packages/components/src/index.ts

@@ -8,3 +8,5 @@ export * from './components/OpenLayers/OpenLayers';
 export * from './components/Map';
 export * from './components/PdfViewer';
 export * from "./components/Excel";
+export * from "./components/BucketViewer";
+export * from "./components/Iframe";

packages/components/stories/BucketViewer.stories.ts

@@ -0,0 +1,46 @@
+import { type Meta, type StoryObj } from '@storybook/react';
+
+import { BucketViewer, BucketViewerProps } from '../src/components/BucketViewer';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta: Meta = {
+  title: 'Components/BucketViewer',
+  component: BucketViewer,
+  tags: ['autodocs'],
+  argTypes: {
+    domain: {
+      description:
+        'Bucket domain URI',
+    },
+    suffix: {
+      description:
+        'Suffix of bucket domain',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<BucketViewerProps>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Normal: Story = {
+  name: 'Bucket viewer',
+  args: {
+    domain: 'https://ssen-smart-meter.datopian.workers.dev',
+    suffix: '/',
+    dataMapperFn: async (rawData: Response) => {
+      const result = await rawData.json();
+      return result.objects.map(
+        e => ({
+          downloadFileUri: e.downloadLink,
+          fileName: e.key.replace(/^(\w+\/)/g, '') ,
+          dateProps: {
+            date: new Date(e.uploaded),
+            dateFormatter: (date) => date.toLocaleDateString()
+          }
+        })
+      )
+    }
+  },
+};

packages/components/stories/Iframe.stories.ts

@@ -0,0 +1,31 @@
+import { type Meta, type StoryObj } from '@storybook/react';
+
+import { Iframe, IframeProps } from '../src/components/Iframe';
+
+const meta: Meta = {
+  title: 'Components/Iframe',
+  component: Iframe,
+  tags: ['autodocs'],
+  argTypes: {
+    url: {
+      description:
+        'Page to display inside of the component',
+    },
+    style: {
+      description:
+        'Style of the component',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<IframeProps>;
+
+export const Normal: Story = {
+  name: 'Iframe',
+  args: {
+    url: 'https://app.powerbi.com/view?r=eyJrIjoiYzBmN2Q2MzYtYzE3MS00ODkxLWE5OWMtZTQ2MjBlMDljMDk4IiwidCI6Ijk1M2IwZjgzLTFjZTYtNDVjMy04MmM5LTFkODQ3ZTM3MjMzOSIsImMiOjh9',
+    style: {width: `100%`, height: `100%`}
+  },
+};

packages/components/stories/Map.stories.ts

@@ -21,6 +21,12 @@ const meta: Meta = {
     zoom: {
       description: 'Zoom level',
     },
+    style: {
+      description: "Styles for the container"
+    },
+    autoZoomConfiguration: {
+      description: "Configuration to auto zoom in the specified layer data"
+    }
   },
 };
 
@@ -88,4 +94,32 @@ export const GeoJSONMultipleLayers: Story = {
     center: { latitude: 45, longitude: 0 },
     zoom: 2,
   },
+}
+
+export const GeoJSONMultipleLayersWithAutoZoomInSpecifiedLayer: Story = {
+  name: 'GeoJSON polygons and points map with auto zoom in the points layer',
+  args: {
+    layers: [
+      {
+        data: 'https://opendata.arcgis.com/datasets/9c58741995174fbcb017cf46c8a42f4b_25.geojson',
+        name: 'Points',
+        tooltip: true,
+      },
+      {
+        data: 'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_geography_marine_polys.geojson',
+        name: 'Polygons',
+        tooltip: true,
+        colorScale: {
+          starting: '#ff0000',
+          ending: '#00ff00',
+        },
+      },
+    ],
+    title: 'Polygons and points',
+    center: { latitude: 45, longitude: 0 },
+    zoom: 2,
+    autoZoomConfiguration: {
+      layerName: 'Points'
+    }
+  },
 };

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portaljs/core",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "Core Portal.JS components, configs and utils.",
   "repository": {
     "type": "git",

packages/core/src/ui/analytics/GoogleAnalytics.tsx

@@ -0,0 +1,36 @@
+import Script from 'next/script.js'
+
+export interface GoogleAnalyticsProps {
+  googleAnalyticsId: string
+}
+
+export const GA = ({ googleAnalyticsId }: GoogleAnalyticsProps) => {
+  return (
+    <>
+      <Script
+        strategy="afterInteractive"
+        src={`https://www.googletagmanager.com/gtag/js?id=${googleAnalyticsId}`}
+      />
+
+      <Script strategy="afterInteractive" id="ga-script">
+        {`
+            window.dataLayer = window.dataLayer || [];
+            function gtag(){dataLayer.push(arguments);}
+            gtag('js', new Date());
+            gtag('config', '${googleAnalyticsId}');
+        `}
+      </Script>
+    </>
+  )
+}
+
+// https://developers.google.com/analytics/devguides/collection/gtagjs/events
+export const logEvent = (action, category, label, value) => {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  window.gtag?.('event', action, {
+    event_category: category,
+    event_label: label,
+    value: value,
+  })
+}

packages/core/src/ui/analytics/Plausible.tsx

@@ -0,0 +1,41 @@
+import Script from 'next/script.js'
+
+export interface PlausibleProps {
+  plausibleDataDomain: string
+  dataApi?: string
+  src?: string
+}
+
+/**
+ * Plausible analytics component.
+ * To proxy the requests through your own domain, you can use the dataApi and src attribute.
+ * See [Plausible docs](https://plausible.io/docs/proxy/guides/nextjs#step-2-adjust-your-deployed-script)
+ * for more information.
+ *
+ */
+export const Plausible = ({
+  plausibleDataDomain,
+  dataApi = undefined,
+  src = 'https://plausible.io/js/plausible.js',
+}: PlausibleProps) => {
+  return (
+    <>
+      <Script
+        strategy="lazyOnload"
+        data-domain={plausibleDataDomain}
+        data-api={dataApi}
+        src={src}
+      />
+      <Script strategy="lazyOnload" id="plausible-script">
+        {`
+            window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }
+        `}
+      </Script>
+    </>
+  )
+}
+
+// https://plausible.io/docs/custom-event-goals
+export const logEvent = (eventName, ...rest) => {
+  return window.plausible?.(eventName, ...rest)
+}

packages/core/src/ui/analytics/Posthog.tsx

@@ -0,0 +1,25 @@
+import Script from 'next/script.js'
+
+export interface PosthogProps {
+  posthogProjectApiKey: string
+  apiHost?: string
+}
+
+/**
+ * Posthog analytics component.
+ * See [Posthog docs](https://posthog.com/docs/libraries/js#option-1-add-javascript-snippet-to-your-html-badgerecommendedbadge) for more information.
+ *
+ */
+export const Posthog = ({
+  posthogProjectApiKey,
+  apiHost = 'https://app.posthog.com',
+}: PosthogProps) => {
+  return (
+    <Script strategy="lazyOnload" id="posthog-script">
+      {`
+          !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.async=!0,p.src=s.api_host+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
+          posthog.init('${posthogProjectApiKey}',{api_host:'${apiHost}'})
+      `}
+    </Script>
+  )
+}

packages/core/src/ui/analytics/SimpleAnalytics.tsx

@@ -0,0 +1,29 @@
+import Script from 'next/script.js'
+
+export interface SimpleAnalyticsProps {
+  src?: string
+}
+
+export const SimpleAnalytics = ({
+  src = 'https://scripts.simpleanalyticscdn.com/latest.js',
+}: SimpleAnalyticsProps) => {
+  return (
+    <>
+      <Script strategy="lazyOnload" id="sa-script">
+        {`
+            window.sa_event=window.sa_event||function(){var a=[].slice.call(arguments);window.sa_event.q?window.sa_event.q.push(a):window.sa_event.q=[a]};
+        `}
+      </Script>
+      <Script strategy="lazyOnload" src={src} />
+    </>
+  )
+}
+
+// https://docs.simpleanalytics.com/events
+export const logEvent = (eventName, callback) => {
+  if (callback) {
+    return window.sa_event?.(eventName, callback)
+  } else {
+    return window.sa_event?.(eventName)
+  }
+}

packages/core/src/ui/analytics/Umami.tsx

@@ -0,0 +1,20 @@
+import Script from 'next/script.js'
+
+export interface UmamiProps {
+  umamiWebsiteId: string
+  src?: string
+}
+
+export const Umami = ({
+  umamiWebsiteId,
+  src = 'https://analytics.umami.is/script.js',
+}: UmamiProps) => {
+  return (
+    <Script
+      async
+      defer
+      data-website-id={umamiWebsiteId}
+      src={src} // Replace with your umami instance
+    />
+  )
+}

packages/core/src/ui/analytics/index.tsx

@@ -0,0 +1,82 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { GA, GoogleAnalyticsProps } from "./GoogleAnalytics";
+import { Plausible, PlausibleProps } from "./Plausible";
+import { SimpleAnalytics, SimpleAnalyticsProps } from "./SimpleAnalytics";
+import { Umami, UmamiProps } from "./Umami";
+import { Posthog, PosthogProps } from "./Posthog";
+
+declare global {
+    interface Window {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        gtag?: (...args: any[]) => void;
+        plausible?: (...args: any[]) => void;
+        sa_event?: (...args: any[]) => void;
+    }
+}
+
+export interface AnalyticsConfig {
+    googleAnalytics?: GoogleAnalyticsProps;
+    plausibleAnalytics?: PlausibleProps;
+    umamiAnalytics?: UmamiProps;
+    posthogAnalytics?: PosthogProps;
+    simpleAnalytics?: SimpleAnalyticsProps;
+}
+
+/**
+ * @example
+ * const analytics: AnalyticsConfig = {
+ *  plausibleDataDomain: '', // e.g. tailwind-nextjs-starter-blog.vercel.app
+ *  simpleAnalytics: false, // true or false
+ *  umamiWebsiteId: '', // e.g. 123e4567-e89b-12d3-a456-426614174000
+ *  posthogProjectApiKey: '', // e.g. AhnJK8392ndPOav87as450xd
+ *  googleAnalyticsId: '', // e.g. UA-000000-2 or G-XXXXXXX
+ * }
+ */
+export interface AnalyticsProps {
+    analyticsConfig: AnalyticsConfig;
+}
+
+const isProduction = true || process.env["NODE_ENV"] === "production";
+
+/**
+ * Supports Plausible, Simple Analytics, Umami, Posthog or Google Analytics.
+ * All components default to the hosted service, but can be configured to use a self-hosted
+ * or proxied version of the script by providing the `src` / `apiHost` props.
+ *
+ * Note: If you want to use an analytics provider you have to add it to the
+ * content security policy in the `next.config.js` file.
+ * @param {AnalyticsProps} { analytics }
+ * @return {*}
+ */
+export const Analytics = ({ analyticsConfig }: AnalyticsProps) => {
+    return (
+        <>
+            {isProduction && analyticsConfig.plausibleAnalytics && (
+                <Plausible {...analyticsConfig.plausibleAnalytics} />
+            )}
+            {isProduction && analyticsConfig.simpleAnalytics && (
+                <SimpleAnalytics {...analyticsConfig.simpleAnalytics} />
+            )}
+            {isProduction && analyticsConfig.posthogAnalytics && (
+                <Posthog {...analyticsConfig.posthogAnalytics} />
+            )}
+            {isProduction && analyticsConfig.umamiAnalytics && (
+                <Umami {...analyticsConfig.umamiAnalytics} />
+            )}
+            {isProduction && analyticsConfig.googleAnalytics && (
+                <GA {...analyticsConfig.googleAnalytics} />
+            )}
+        </>
+    );
+};
+
+export { GA, Plausible, SimpleAnalytics, Umami, Posthog };
+
+export type {
+    GoogleAnalyticsProps,
+    PlausibleProps,
+    UmamiProps,
+    PosthogProps,
+    SimpleAnalyticsProps,
+};

packages/core/src/ui/index.ts

@@ -21,3 +21,4 @@ export { SiteToc, NavItem, NavGroup } from "./SiteToc";
 export { Comments, CommentsConfig } from "./Comments";
 export { AuthorConfig } from "./types";
 export { Hero } from "./Hero";
+export { Analytics, AnalyticsConfig } from "./analytics";

packages/core/src/utils/gtag.ts

@@ -7,6 +7,8 @@ export const pageview = ({
   analyticsID: string;
 }) => {
   if (typeof window.gtag !== undefined) {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
     window.gtag("config", analyticsID, {
       page_path: url,
     });
@@ -16,6 +18,8 @@ export const pageview = ({
 // https://developers.google.com/analytics/devguides/collection/gtagjs/events
 export const event = ({ action, category, label, value }) => {
   if (typeof window.gtag !== undefined) {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
     window.gtag("event", action, {
       event_category: category,
       event_label: label,