@next/third-parties 14.0.5-canary.6 → 14.0.5-canary.7

package/dist/google/ga.d.ts

@@ -0,0 +1,8 @@
+import type { GAParams } from '../types/google';
+declare global {
+    interface Window {
+        dataLayer?: Object[];
+    }
+}
+export declare function GoogleAnalytics(props: GAParams): import("react/jsx-runtime").JSX.Element;
+export declare const sendGAEvent: (...args: Object[]) => void;

package/dist/google/ga.js

@@ -0,0 +1,51 @@
+"use strict";
+'use client';
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sendGAEvent = exports.GoogleAnalytics = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// TODO: Evaluate import 'client only'
+const react_1 = require("react");
+const script_1 = __importDefault(require("next/script"));
+let currDataLayerName = undefined;
+function GoogleAnalytics(props) {
+    const { gaId, dataLayerName = 'dataLayer' } = props;
+    if (currDataLayerName === undefined) {
+        currDataLayerName = dataLayerName;
+    }
+    (0, react_1.useEffect)(() => {
+        // performance.mark is being used as a feature use signal. While it is traditionally used for performance
+        // benchmarking it is low overhead and thus considered safe to use in production and it is a widely available
+        // existing API.
+        // The performance measurement will be handled by Chrome Aurora
+        performance.mark('mark_feature_usage', {
+            detail: {
+                feature: 'next-third-parties-ga',
+            },
+        });
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(script_1.default, { id: "_next-ga-init", dangerouslySetInnerHTML: {
+                    __html: `
+          window['${dataLayerName}'] = window['${dataLayerName}'] || [];
+          function gtag(){window['${dataLayerName}'].push(arguments);}
+          gtag('js', new Date());
+
+          gtag('config', '${gaId}');`,
+                } }), (0, jsx_runtime_1.jsx)(script_1.default, { id: "_next-ga", src: `https://www.googletagmanager.com/gtag/js?id=${gaId}` })] }));
+}
+exports.GoogleAnalytics = GoogleAnalytics;
+const sendGAEvent = (...args) => {
+    if (currDataLayerName === undefined) {
+        console.warn(`@next/third-parties: GA has not been initialized`);
+        return;
+    }
+    if (window[currDataLayerName]) {
+        window[currDataLayerName].push(...args);
+    }
+    else {
+        console.warn(`@next/third-parties: GA dataLayer ${currDataLayerName} does not exist`);
+    }
+};
+exports.sendGAEvent = sendGAEvent;

package/dist/google/gtm.js

@@ -22,6 +22,7 @@ function GoogleTagManager(props) {
         // performance.mark is being used as a feature use signal. While it is traditionally used for performance
         // benchmarking it is low overhead and thus considered safe to use in production and it is a widely available
         // existing API.
+        // The performance measurement will be handled by Chrome Aurora
         performance.mark('mark_feature_usage', {
             detail: {
                 feature: 'next-third-parties-gtm',

package/dist/google/index.d.ts

@@ -1,3 +1,4 @@
 export { default as GoogleMapsEmbed } from './google-maps-embed';
 export { default as YouTubeEmbed } from './youtube-embed';
 export { GoogleTagManager, sendGTMEvent } from './gtm';
+export { GoogleAnalytics, sendGAEvent } from './ga';

package/dist/google/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.sendGTMEvent = exports.GoogleTagManager = exports.YouTubeEmbed = exports.GoogleMapsEmbed = void 0;
+exports.sendGAEvent = exports.GoogleAnalytics = exports.sendGTMEvent = exports.GoogleTagManager = exports.YouTubeEmbed = exports.GoogleMapsEmbed = void 0;
 var google_maps_embed_1 = require("./google-maps-embed");
 Object.defineProperty(exports, "GoogleMapsEmbed", { enumerable: true, get: function () { return __importDefault(google_maps_embed_1).default; } });
 var youtube_embed_1 = require("./youtube-embed");
@@ -11,3 +11,6 @@ Object.defineProperty(exports, "YouTubeEmbed", { enumerable: true, get: function
 var gtm_1 = require("./gtm");
 Object.defineProperty(exports, "GoogleTagManager", { enumerable: true, get: function () { return gtm_1.GoogleTagManager; } });
 Object.defineProperty(exports, "sendGTMEvent", { enumerable: true, get: function () { return gtm_1.sendGTMEvent; } });
+var ga_1 = require("./ga");
+Object.defineProperty(exports, "GoogleAnalytics", { enumerable: true, get: function () { return ga_1.GoogleAnalytics; } });
+Object.defineProperty(exports, "sendGAEvent", { enumerable: true, get: function () { return ga_1.sendGAEvent; } });

package/dist/types/google.d.ts

@@ -11,6 +11,10 @@ export type GTMParams = {
     auth?: string;
     preview?: string;
 };
+export type GAParams = {
+    gaId: string;
+    dataLayerName?: string;
+};
 export type GoogleMapsEmbed = {
     height?: number;
     width?: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next/third-parties",
-  "version": "14.0.5-canary.6",
+  "version": "14.0.5-canary.7",
   "repository": {
     "url": "vercel/next.js",
     "directory": "packages/third-parties"
@@ -25,7 +25,7 @@
     "third-party-capital": "1.0.20"
   },
   "devDependencies": {
-    "next": "14.0.5-canary.6",
+    "next": "14.0.5-canary.7",
     "outdent": "0.8.0",
     "prettier": "2.5.1"
   },