4.0.2 • Published 1 year ago
@sm-monobrands/set-gtm v4.0.2
Install
npm install --save @sm-monobrands/set-gtmUsage
- router.js:
const setGTM = require('@sm-monobrands/set-gtm')
const PAGE_TYPE = require('@sm-monobrands/page-type-registry')
const gtmCode = 'ABC'
const initDataLayer = 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: initDataLayer(PAGE_TYPE.ERROR),
search: initDataLayer(PAGE_TYPE.SEARCH_RESULTS),
catalog: initDataLayer(PAGE_TYPE.CATALOG)
}
}
}
]
})
}- 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 a function that accepts params "pageType" (from @sm-monobrands/page-type-registry), "additionalProps" and returns GTM initialization object in the style vue-meta
Peer dependencies
- vue-meta 2.x.x