nuxt-gtag - npm Package Compare versions

Comparing version 1.1.2 to 1.2.0

dist/module.d.ts

 import * as _nuxt_schema from '@nuxt/schema';
 
+interface GoogleTagOptions {
+    id: string;
+    config?: Record<string, any>;
+}
+
 interface ModuleOptions {
     /**
-     * The Google Analytics 4 property ID to use for tracking.
+     * The Google tag ID to initialize.
      *
@@ -11,15 +16,24 @@ * @default undefined
     /**
-     * Additional configuration for the Google Analytics 4 property.
+     * The Google tags to initialize.
      *
      * @remarks
-     * Will be set when initializing `gtag` with the `config` command.
+     * Each item can be a string or an object with `id` and `config` properties. The latter is useful especially when you want to set additional configuration for the Google tag ID.
      *
      * @default undefined
      */
+    tags?: string[] | GoogleTagOptions[];
+    /**
+     * Additional configuration for the Google tag ID to be set when initializing the tag ID with the `config` command.
+     *
+     * @remarks
+     * Does only apply when `id` is set or the `ids` array contains strings.
+     *
+     * @default undefined
+     */
     config?: Record<string, any>;
     /**
-     * Whether to initially consent to tracking.
+     * Whether to initialize the Google tag script immediately after the page has loaded.
      *
      * @remarks
-     * If set to `true`, the Google Analytics 4 script will be loaded immediately.
+     * Set this to `false` to delay the initialization until you call the `grantConsent` function manually.
      *
@@ -30,3 +44,3 @@ * @default true
     /**
-     * Whether to load the Google Analytics 4 script asynchronously or defer its loading.
+     * Whether to load the Google tag ID script asynchronously or defer its loading.
      *
@@ -40,2 +54,11 @@ * @remarks
     loadingStrategy?: 'async' | 'defer';
+    /**
+     * The URL to load the Google tag script from.
+     *
+     * @remarks
+     * Useful if you want to proxy the script through your own server.
+     *
+     * @default 'https://www.googletagmanager.com/gtag/js'
+     */
+    url?: string;
 }
@@ -42,0 +65,0 @@ declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;

dist/module.json

 {
   "name": "nuxt-gtag",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "configKey": "gtag",
@@ -5,0 +5,0 @@ "compatibility": {

dist/runtime/composables/useGtag.d.ts

 import type { Gtag, UseGtagConsentOptions } from '../types';
 export declare function useGtag(): {
     gtag: Gtag;
-    setConsent: (options: UseGtagConsentOptions) => void;
+    setConsent: ({ id, hasConsent, }: UseGtagConsentOptions) => void;
     grantConsent: (id?: string) => void;
     revokeConsent: (id?: string) => void;
 };

dist/runtime/gtag.d.ts

@@ -0,13 +1,14 @@
+import type { GoogleTagOptions } from './types';
 export declare function gtag(command: string, ...args: any[]): void;
 /**
- * Initialize the Google Analytics script.
+ * Initialize the Google tag.
  */
-export declare function initGtag({ id, config }: {
-    id: string;
-    config: any;
+export declare function initGtag({ tags }: {
+    tags: GoogleTagOptions[];
 }): void;
 /**
- * Disable Google Analytics.
+ * Disable the Google tag if it is a Google Analytics property.
  *
- * The Google tag (gtag.js) library includes a `window['ga-disable-MEASUREMENT_ID']`
+ * @remarks
+ * The Google tag library includes a `window['ga-disable-GA_MEASUREMENT_ID']`
  * property that, when set to `true`, turns off the Google tag from sending data.
@@ -14,0 +15,0 @@ *

dist/runtime/types.d.ts

@@ -0,1 +1,5 @@
+export interface GoogleTagOptions {
+    id: string;
+    config?: Record<string, any>;
+}
 export interface UseGtagConsentOptions {
@@ -9,3 +13,3 @@ /**
     /**
-     * In case you want to initialize a custom Gtag ID. Make sure to set
+     * In case you want to initialize a custom Google tag ID. Make sure to set
      * `initialConsent` to `false` in the module options beforehand.
@@ -12,0 +16,0 @@ */

package.json

 {
   "name": "nuxt-gtag",
   "type": "module",
-  "version": "1.1.2",
-  "packageManager": "pnpm@8.12.1",
-  "description": "Nuxt 3 module to natively integrate Google Analytics",
+  "version": "1.2.0",
+  "packageManager": "pnpm@8.15.1",
+  "description": "Natively integrates Google Tag into Nuxt",
   "author": "Johann Schopplich <[e-mail]>",
@@ -16,8 +16,7 @@ "license": "MIT",
   "keywords": [
-    "nuxt",
-    "nuxt3",
+    "analytics",
     "google",
     "gtag",
     "gtm",
-    "analytics"
+    "nuxt"
   ],
@@ -47,18 +46,19 @@ "exports": {
   "dependencies": {
-    "@nuxt/kit": "^3.8.2",
-    "defu": "^6.1.3",
-    "pathe": "^1.1.1"
+    "@nuxt/kit": "^3.10.1",
+    "defu": "^6.1.4",
+    "pathe": "^1.1.2",
+    "ufo": "^1.4.0"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^2.4.6",
-    "@nuxt/module-builder": "^0.5.4",
-    "@nuxt/schema": "^3.8.2",
-    "@types/node": "^20.10.5",
-    "bumpp": "^9.2.1",
+    "@antfu/eslint-config": "^2.6.4",
+    "@nuxt/module-builder": "^0.5.5",
+    "@nuxt/schema": "^3.10.1",
+    "@types/node": "^20.11.17",
+    "bumpp": "^9.3.0",
     "eslint": "^8.56.0",
-    "nuxt": "^3.8.2",
+    "nuxt": "^3.10.1",
     "nuxt-gtag": "workspace:*",
     "typescript": "^5.3.3",
-    "vue-tsc": "^1.8.25"
+    "vue-tsc": "^1.8.27"
   }
 }

README.md

@@ -1,8 +0,8 @@
-![Nuxt Gtag module](./.github/og.jpg)
+![Nuxt Google Tag module](./.github/social-card.jpg)
 
-# Nuxt Gtag
+# Nuxt Google Tag
 
 [![npm version](https://img.shields.io/npm/v/nuxt-gtag?color=a1b858&label=)](https://www.npmjs.com/package/nuxt-gtag)
 
-[Nuxt](https://nuxt.com) module to integrate [Google Analytics 4](https://developers.google.com/analytics/devguides/collection/ga4?hl=en).
+[Google Tag](https://developers.google.com/tag-platform/gtagjs?hl=en) integration for [Nuxt](https://nuxt.com) with support for [Google Analytics 4](https://developers.google.com/analytics/devguides/collection/ga4?hl=en), Google Ads and more.
 
@@ -12,3 +12,5 @@ ## Features
 - 🌻 No dependencies except Google's `gtag.js`
+- 🛍️ For Google Analytics 4, Google Ads and other products
 - 🤝 Manual [consent management](#consent-management) for GDPR compliance
+- 🔢 Supports [multiple tag IDs](#multiple-google-tags)
 - 📯 Track events manually with [composables](#composables)
@@ -34,3 +36,3 @@ - 🏷️ Fully typed `gtag.js` API
 
-Add `nuxt-gtag` to the `modules` section of your Nuxt configuration and provide your Google Analytics measurement ID.
+Add `nuxt-gtag` to the `modules` section of your Nuxt configuration and provide your Google tag ID (for multiple tag IDs, see below).
 
@@ -48,3 +50,3 @@ ```ts
 
-Done! Google Analytics will now run in your application's client.
+Done! The `gtag.js` script will be loaded and initialized client-side with your Google tag ID when the Nuxt application starts.
 
@@ -61,5 +63,51 @@ > [!NOTE]
 
+### Multiple Google Tags
+
+If you want to send data to multiple destinations, you can add more than one Google tag ID to your Nuxt configuration in the `tags` module option.
+
+The following example shows how to load a second Google tag that is connected to a Floodlight destination. To send data to Floodlight (tag ID `DC-ZZZZZZZZZZ`), add another config command after initializing the first Google tag (tag ID `GT-XXXXXXXXXX`):
+
+```ts
+// `nuxt.config.ts`
+export default defineNuxtConfig({
+  modules: ['nuxt-gtag'],
+
+  gtag: {
+    tags: [
+      'GT-XXXXXXXXXX', // Google Ads and GA4
+      'DC-ZZZZZZZZZZ' // Floodlight
+    ]
+  }
+})
+```
+
+Or use the object syntax to initialize multiple tags with different configurations:
+
+```ts
+// `nuxt.config.ts`
+export default defineNuxtConfig({
+  modules: ['nuxt-gtag'],
+
+  gtag: {
+    tags: [
+      {
+        id: 'GT-XXXXXXXXXX',
+        config: {
+          page_title: 'GA4'
+        }
+      },
+      {
+        id: 'DC-ZZZZZZZZZZ',
+        config: {
+          page_title: 'Floodlight'
+        }
+      }
+    ]
+  }
+})
+```
+
 ## Configuration
 
-All [supported module options](#module-options) can be configured using the `gtag` key in your Nuxt configuration:
+All [supported module options](#module-options) can be configured using the `gtag` key in your Nuxt configuration. An example of some of the options you can set:
 
@@ -71,8 +119,14 @@ ```ts
   gtag: {
-    // The Google Analytics 4 property ID to use for tracking
+    // Your primary Google tag ID
     id: 'G-XXXXXXXXXX',
-    // Additional configuration for the Google Analytics 4 property
+    // Additional configuration for this tag ID
     config: {
       page_title: 'My Custom Page Title'
-    }
+    },
+
+    // To send data to multiple destinations, use this option instead:
+    tags: [
+      'GT-XXXXXXXXXX', // Google Ads and GA4
+      'DC-ZZZZZZZZZZ' // Floodlight
+    ]
   }
@@ -84,3 +138,3 @@ })
 
-Instead of hard-coding your measurement ID in your Nuxt configuration, you can set your desired option in your project's `.env` file, leveraging [automatically replaced public runtime config values](https://nuxt.com/docs/api/configuration/nuxt-config#runtimeconfig) by matching environment variables at runtime.
+Instead of hard-coding your Google tag ID in your Nuxt configuration, you can set your desired option in your project's `.env` file, leveraging [automatically replaced public runtime config values](https://nuxt.com/docs/api/nuxt-config#runtimeconfig) by matching environment variables at runtime.
 
@@ -92,7 +146,7 @@ ```ini
 
-With this setup, you can omit the `gtag` key in your Nuxt configuration if you only intend to set the measurement ID.
+With this setup, you can omit the `gtag` key in your Nuxt configuration if you only intend to set the Google tag ID.
 
 ### Consent Management
 
-If you want to disable tracking by default, you can set the `initialConsent` option to `false`. This will prevent the `gtag.js` script from loading until the user has consented to tracking.
+For GDPR compliance, you may want to delay the loading of the `gtag.js` script until the user has granted consent. Set the `initialConsent` option to `false` to prevent the `gtag.js` script from loading until you manually enable it.
 
@@ -124,4 +178,6 @@ ```ts
 
-You can even leave the measurement ID in your Nuxt config blank and set it dynamically later in your application by passing your ID as the first argument to `grantConsent`. This is especially useful if you want to use a custom ID for each user or if your app manages multiple tenants.
+### Multi-Tenancy Support
 
+You can even leave the Google tag ID in your Nuxt config blank and set it dynamically later in your application by passing your ID as the first argument to `grantConsent`. This is especially useful if you want to use a custom ID for each user or if your app manages multiple tenants.
+
 ```ts
@@ -139,6 +195,8 @@ const { gtag, grantConsent, revokeConsent } = useGtag()
 | --- | --- | --- | --- |
-| `id` | `string` | `undefined` | The Google Analytics measurement ID. |
-| `config` | `Record<string, any>` | `{}` | The [configuration parameters](https://developers.google.com/analytics/devguides/collection/ga4/reference/config) to be passed to `gtag.js` on initialization. |
-| `initialConsent` | `boolean` | `true` | Whether to initially consent to tracking. |
+| `id` | `string` | `undefined` | The Google tag ID to initialize. |
+| `config` | `Record<string, any>` | `undefined` | The [configuration parameters](https://developers.google.com/analytics/devguides/collection/ga4/reference/config) to be passed to `gtag.js` on initialization. |
+| `tags` | `string[] \| GoogleTagOptions[]` | `[]` | Multiple Google tag IDs to initialize for sending data to different destinations. |
+| `initialConsent` | `boolean` | `true` | Whether to initialize the Google tag script immediately after the page has loaded. |
 | `loadingStrategy` | `'async' \| 'defer'` | `'defer'` | The loading strategy to be used for the `gtag.js` script. |
+| `url` | `string` | `'https://www.googletagmanager.com/gtag/js'` | The URL to the `gtag.js` script. Use this option to load the script from a custom URL. |
 
@@ -222,5 +280,5 @@ ## Composables
 
-If you want to manually manage consent, i.e. for GDPR compliance, you can use the `grantConsent` method to grant the consent. Make sure to set `initialConsent` to `false` in the module options beforehand.
+If you want to manually manage consent, i.e. for GDPR compliance, you can use the `grantConsent` method to initialize the `gtag.js` script after the user has accepted your cookie policy. Make sure to set `initialConsent` to `false` in the module options beforehand.
 
-This function accepts an optional ID in case you want to initialize a custom Gtag ID and haven't set it in the module options.
+This function accepts an optional ID in case you want to initialize a custom Google tag ID and haven't set it in the module options.
 
@@ -230,7 +288,7 @@ ```ts
 
-// When called, the `gtag.js` script will be loaded and tracking will begin
+// When called, the `gtag.js` script will be loaded all tag IDs initialized
 grantConsent()
 ```
 
-> [!NOTE]
+> [!TIP]
 > Although this method is SSR-safe, the `gtag.js` script will be loaded in the client only. Make sure to run this method in the client.
@@ -246,4 +304,7 @@
 
-If a user has previously granted consent, you can use the `revokeConsent` method to revoke the consent. This will prevent the `gtag.js` script from tracking any events until the consent is granted again.
+If a user has previously granted consent, you can use the `revokeConsent` method to revoke the consent. It will prevent the Google tag from sending data until the consent is granted again.
 
+> [!Note]
+> This works only with Google Analytics 4 tags
+
 This function accepts an optional ID in case you haven't set it in the module options. Make sure to pass the same ID that was used to grant the consent.
@@ -309,2 +370,2 @@
 
-[MIT](./LICENSE) License © 2023-present [Johann Schopplich](https://github.com/johannschopplich)
+[MIT](./LICENSE) License © 2023-PRESENT [Johann Schopplich](https://github.com/johannschopplich)

No alert changes

Improved metrics

Total package byte prevSize

29173

increased by19.07%

Number of package files

23

increased by9.52%

Lines of code

403

increased by17.15%

Number of lines in readme file

359

increased by20.47%

Worsened metrics

Dependency count

4

increased by33.33%

Dependency changes

• + Addedufo@^1.4.0

• Updated@nuxt/kit@^3.10.1

• Updateddefu@^6.1.4

• Updatedpathe@^1.1.2