ReSee Movies Nuxt Analytics

Google Analytics integration with vanilla-cookieconsent.

[!IMPORTANT] This package makes every attempt to adhere to privacy-focused best practices. By default, all Consent Mode configuration is strictly opt-in.

Installation

npm i @resee-movies/nuxt-analytics

// nuxt.config.ts
export default defineNuxtConfig({
  // Add it to the app's modules list
  modules: [
    '@resee-movies/nuxt-analytics',
  ],
  
  // Provide configuration
  analytics: {
    id: 'G-TAG_ID', // Minimum requirement
  },
});

Usage

Out of the box, the only requirements is that a gtag ID be provided in the configuration. If not provided, the module will consider itself disabled.

With a gtag ID, most of the provided functionality is on rails - if not encountered before, the consent configurator will display on load, and then Analytics will be configured with the indicated consent level(s).

Additional configuration can be seen here.

Composables

Because sometimes you need to do your own thing.

useGtag

Exposes the Google tag API gtag method for use.

import { useGtag } from '@resee-movies/nuxt-analytics/composables';

const { gtag } = useGtag();

function signUpComplete() {
  gtag('event', 'signup', 'qr-code');
}

useCookieConsent

Exposes helper methods for the consent interface.

<script setup lang="ts">
  import { useCookieConsent } from '@resee-movies/nuxt-analytics/composables';
  const { enabled, show } = useCookieConsent();
</script>

<template>
  <button v-if="enabled" @click="show">Update Your Consent Preferences</button>
</template>

useServerAnalytics

A utility method for interacting with the Google Analytics Measurement Protocol.

[!IMPORTANT] This requires that the apiSecret configuration value be provided in addition to id. Since the apiSecret is sensitive, this value is not stored in Nuxt's public runtimeConfig and so this utility is exclusively limited to server-side operation. If invoked in client-side code, a console warning will be issued and the method will effectively be a noop.

import { useServerAnalytics } from '@resee-movies/nuxt-analytics/composables';

// ...

async function recordMeasurement() {
  if (import.meta.server) {
    await useServerAnalytics({
      events: [/* ... */],
    });
  }
}