Integrate vue-gtm with unhead

33 Views Asked by At

I'm using @unhead/vue to manage changing page titles and meta tags in a VueJS3 SPA. I'd like to use @gtm-support/vue-gtm to handle my GTM tagging and events.

My setup:

// main.ts
import { createApp } from 'vue';
import { createHead } from '@unhead/vue';
import { createGtm } from '@gtm-support/vue-gtm';

import App from './App.vue';
import router from './router';

const app = createApp(App);
app.use(router);
app.use(createHead());
app.use(
  createGtm({
    id: 'GTM-XXXXXXXX',
    vueRouter: router,
    debug: true,
  }),
);

app.mount('#app');

I have a dynamic route /go/:name that has a different page <title> depending on the value of :name. This is set in the component like so:

<script setup lang="ts">
import { useRoute } from 'vue-router';
import { useHead } from '@unhead/vue';
const route = useRoute();
const name = route.params.name;

useHead({
  title: `Go to ${name}`,
});

Currently, with debug: true on in my vue-gtm config, I see events like this:

{screenName: 'go', path: '/go/foo'}
{screenName: 'go', path: '/go/bar'}
{screenName: 'go', path: '/go/qua'}

How can I change the screenName being sent to be different on each of those pages, ideally picking up the value I'm already setting in the title with unhead?

0

There are 0 best solutions below