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?