nuxt-gtag - npm Package Compare versions

Comparing version 0.4.0 to 0.5.1

dist/module.d.ts

@@ -20,2 +20,11 @@ import * as _nuxt_schema from '@nuxt/schema';
     /**
+     * Whether to initially consent to tracking
+     *
+     * @remarks
+     * If set to `true`, the Google Analytics 4 script will be loaded immediately
+     *
+     * @default true
+     */
+    initialConsent?: boolean;
+    /**
      * Whether to load the Google Analytics 4 script asynchronously or defer its loading
@@ -22,0 +31,0 @@ *

dist/module.json

 {
   "name": "nuxt-gtag",
-  "version": "0.4.0",
+  "version": "0.5.1",
   "configKey": "gtag",
@@ -5,0 +5,0 @@ "compatibility": {

package.json

 {
   "name": "nuxt-gtag",
   "type": "module",
-  "version": "0.4.0",
+  "version": "0.5.1",
   "packageManager": "pnpm@8.1.0",
@@ -52,3 +52,3 @@ "description": "Nuxt 3 module to natively integrate Google Analytics",
   "devDependencies": {
-    "@antfu/eslint-config": "^0.38.3",
+    "@antfu/eslint-config": "^0.38.4",
     "@nuxt/module-builder": "^0.2.1",
@@ -58,8 +58,8 @@ "@nuxt/schema": "^3.3.3",
     "bumpp": "^9.1.0",
-    "eslint": "^8.37.0",
+    "eslint": "^8.38.0",
     "nuxt": "^3.3.3",
     "nuxt-gtag": "workspace:*",
-    "typescript": "^5.0.3",
+    "typescript": "^5.0.4",
     "vue-tsc": "^1.2.0"
   }
 }

README.md

@@ -12,4 +12,5 @@ ![Nuxt Gtag module](./.github/og.png)
 - 🌻 No dependencies except Google's `gtag.js`
+- 🤝 Manual [consent management](#consent-management) for GDPR compliance
+- 📯 Track events manually with [composables](#composables)
 - 🦾 SSR-ready
-- 📯 Track events manually with [composables](#composables)
 - 📂 [`.env` file support](#configuration)
@@ -44,3 +45,7 @@
 
-> ℹ️ Make sure the `Page changes based on browser history events` checkbox is enabled. This will allow GA4 to automatically track page views. You can find this option in the `Admin` > `Property` > `Data Streams` > `Web` > `General Settings` > `User-Defined` > `Page changes based on browser history events` section.
+> **Note**
+>
+> Ensure that the **Enhanced measurement** feature is enabled to allow GA4 to automatically track page views in your Single Page Application.
+>
+> To enable this feature, go to your Google Analytics 4 account, then navigate to "Admin" > "Data Streams" > "Web" > "Enhanced measurement settings." In this section, make sure the "Page views" toggle is enabled. Enabling the "Page views" toggle allows GA4 to track page changes based on browser history events in your Single Page Application.
 
@@ -60,6 +65,37 @@ ## Configuration
     }
-  },
+  }
 })
 ```
 
+### 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.
+
+```ts
+export default defineNuxtConfig({
+  modules: ['nuxt-gtag'],
+
+  gtag: {
+    id: 'G-XXXXXXXXXX',
+    initialConsent: false
+  }
+})
+```
+
+To manually manage consent, you can use the [`useGtagConsent` composable](#usegtagconsent) to set the consent state, e.g. after the user has accepted your cookie policy.
+
+```vue
+<script setup lang="ts">
+function acceptTracking() {
+  useGtagConsent(true)
+}
+</script>
+
+<template>
+  <button @click="acceptTracking">
+    Accept Tracking
+  </button>
+</template>
+```
+
 ### Runtime Config
@@ -82,2 +118,3 @@
 | `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. |
 | `loadingStrategy` | `'async' \| 'defer'` | `'defer'` | The loading strategy to be used for the `gtag.js` script. |
@@ -131,6 +168,22 @@
 
-### `useTrackEvent`
+### `useGtagConsent`
 
+If you want to manually manage consent, i.e. for GDPR compliance, you can use the `useGtagConsent` composable to set the consent state. This composable accepts a boolean value that indicates whether the user has consented to tracking. If the user has consented, the `gtag.js` script will be loaded and tracking will begin.
+
+This is only necessary if you have disabled the `initialConsent` option.
+
+```ts
+useGtagConsent(true)
+```
+
 > ℹ️ Since the Gtag instance is available in the client only, executing the composable on the server will have no effect.
 
+**Type Declarations**
+
+```ts
+function useGtagConsent(hasConsent: boolean): void
+```
+
+### `useTrackEvent`
+
 Track your defined goals by passing the following parameters:
@@ -141,2 +194,4 @@
 
+> ℹ️ Since the Gtag instance is available in the client only, executing the composable on the server will have no effect.
+
 **Type Declarations**
@@ -143,0 +198,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

14945

increased by24.45%

Number of package files

20

increased by25%

Lines of code

172

increased by30.3%

Number of lines in readme file

226

increased by32.16%

No dependency changes