nb-gtm

This is a Google Tag Manager plugin for Vue.js 3+.

Installation

Yarn
yarn add @vlalg-nimbus/nb-gtm
NPM
npm install @vlalg-nimbus/nb-gtm

Usage

Vue 3
import { createApp } from 'vue'
import App from './App.vue'

import gtmPlugin from '@vlalg-nimbus/nb-gtm'

// Your css files
import './style/style.css';

const app = createApp(App)

app.use(gtmPlugin, { 
  googleKey: "GTM-XXXXXXXX", // Google Key
  permitedDomains: [], // List of allowed domains (If you have domain limitation)
  dev: true, // Console triggers
})

app.mount('#app')
Nuxt 3
import gtmPlugin from '@vlalg-nimbus/nb-gtm'

export default defineNuxtPlugin(context => {
  context.vueApp.use(gtmPlugin, { 
    googleKey: "GTM-XXXXXXXX", // Google Key
    permitedDomains: [], // List of allowed domains (If you have domain limitation)
    dev: true, // Console triggers
  })
})

The only required option when creating is googleKey, the options (dev and permitedDomains) are optional.

To use it, simply call the sets in your files using Vue inject.

Below I provide the names of the sets.

component
<template>
  <button @click="triggerGtm">Button A</button>
</template>

<script setup lang="ts">
  import { inject } from 'vue'
  
  const gtagpush = inject('$gtagpush')

  function triggerGtm () => {
    gtagpush({ category: 'test', label: 'button A' }, 'click')
  }
</script>

Typescript

The lib provides automatic typing

Vue

main.js
  import { createApp } from 'vue'
  import App from './App.vue'

  import gtmPlugin from '@vlalg-nimbus/nb-gtm'
  import type { IOptions } from '@vlalg-nimbus/nb-gtm'

  const app = createApp(App)

  const gtmOptions: IOptions = {
    googleKey: 'GTM-XXXXXXXX',
    permitedDomains: ['http://localhost:3000'],
    dev: true,
  }

  app.use(gtmPlugin, gtmOptions)

  app.mount('#app')
Component
  <script setup lang="ts">
    import { inject } from 'vue'
    import type { GtmPluginContext } from '@vlalg-nimbus/nb-gtm'

    const gtag = inject<GtmPluginContext | null>('$gtag')
    const gtagpush = inject('$gtagpush') as GtmPluginContext['gtagpush']

    function triggerGtm () => {
      gtag?.gtagpush({ category: 'test', label: 'button A' }, 'click')
    }
    function triggerGtmPush () => {
      $gtagpush({ category: 'test', label: 'button B' }, 'click')
    }
  </script>

  <template>
    <button @click="triggerGtm">Button A</button>
    <button @click="triggerGtmPush">Button B</button>
  </template>

Nuxt

main.js
  import { createApp } from 'vue'
  import App from './App.vue'

  import gtmPlugin from '@vlalg-nimbus/nb-gtm'
  import type { IOptions } from '@vlalg-nimbus/nb-gtm'

  const app = createApp(App)

  const gtmOptions: IOptions = {
    googleKey: 'GTM-XXXXXXXX',
    permitedDomains: ['http://localhost:3000'],
    dev: true,
  }

  app.use(gtmPlugin, gtmOptions)

  app.mount('#app')
composables/useGtm.ts
  import { inject } from 'vue'
  import type { DataLayerEvent } from '@vlalg-nimbus/nb-gtm'

  export const useGtm = () => {
    const gtag = inject<DataLayerEvent[]>('$gtag', [])
    const gtagpush = inject<(props: Record<string, any>, e?: string) => void>('$gtagpush', () => {})

    return { gtag, gtagpush }
  }
Component
  <script setup>
    import { useGtm } from '@/composables/useGtm'

    const { gtagpush } = useGtm()

    const send = () => {
      gtagpush({ category: 'test', label: 'button A' }, 'click')
    }
  </script>

  <template>
    <button @click="send">Button A</button>
  </template>

Preview & Playground

This plugin cannot provide a Preview & Playground because we would have to leave a GA key exposed.

Options

Items with an (*) mean they are required

nameValue typeDefaultDescription
googleKey (*)StringSets default Google Key
devBooleanfalseDefines whether to print to the console when trigger a event
permitedDomainsString[][]For greater security, it is possible to pass a list of domains where events can be triggered. Accepts only hostname, example 'domainx.com', 'domainxpto.com', 'localhost'

Sets

nameDescription
$gtagpushIt's a function that you can call by passing an object with event information and an event type (by default, click). It sends custom events to GTM
$gtagThis simply makes the window.dataLayer array available as an injection called $gtag. If you want to directly access the Google Tag Manager (GTM) dataLayer in some component or service, you can use $gtag to view or even interact with the raw data being sent.

Custom Event Example:

const $gtagpush = inject('$gtagpush')

$gtagpush?.({ category: 'loja', action: 'comprou', value: 99.9 }, 'purchase')

/*
// print
  {
    "event": "purchase",
    "category": "loja",
    "action": "comprou",
    "value": 99.9
  }
*/
Table of Contents