README
Install
npm install --save @sm-monobrands/set-gtm
Usage
- router.js:
const setGTM = require('set-gtm')
const gtmCode = 'ABC'
const initialDataLayers = setGTM(gtmCode, 'columbia')
export function createRouter () {
return new Router({
routes: [
{
path: '/catalog/:catalogUrl*',
name: 'CatalogPage',
component: () => import(/* webpackChunkName: "pages/catalog" */ '../pages/catalog-page.vue'),
props: true,
meta: {
analytics: {
notFound: initialDataLayers.notFound,
search: initialDataLayers.search,
catalog: initialDataLayers.catalogListing
}
}
}
]
})
}
- vue component:
<script>
export default {
metaInfo () {
if (this.isNotFoundPage) {
// if you need to pass additional props
return this.$route.meta.analytics.notFound({ "someProp1": "someProp1", "someProp2": "someProp2" })
}
if (this.isSearch) {
return this.$route.meta.analytics.search()
}
return this.$route.meta.analytics.catalog()
}
}
</script>
- index.template.html:
<!doctype html>
<html lang="ru">
<head>
<!-- Google Tag Manager -->
{{{ meta.inject().script.text() }}}
<!-- End Google Tag Manager -->
</head>
<body class="body">
<!-- Google Tag Manager (noscript) -->
{{{ meta.inject().noscript.text({ body: true }) }}}
<!-- End Google Tag Manager (noscript) -->
<!--vue-ssr-outlet-->
</body>
</html>
API
Module exports function setGTM.
The function accepts 2 input parameters:
- gtmCode
- websiteType
The function returns an object with methods that return functions with GTM initialization objects in the style vue-meta for various site pages
Peer dependencies
- vue-meta 2.x.x