@sm-monobrands/set-gtm

GTM config for monobrands

Usage no npm install needed!

<script type="module">
  import smMonobrandsSetGtm from 'https://cdn.skypack.dev/@sm-monobrands/set-gtm';
</script>

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