{"componentChunkName":"component---src-templates-blog-post-js","path":"/how-to-integrate-vuukle-with-gtm/","result":{"data":{"site":{"siteMetadata":{"title":"Vuukle Docs","author":"Vuukle"}},"markdownRemark":{"id":"b8934c39-0c1c-51b2-afac-c5b3e62c2f38","html":"

GTM Steps

\n
    \n
  1. Create the GTM container
    2. \n
  2. Go to Variables and create a new user defined data layer variable.
    3. \n
  3. \n

    Chose the data layer variable name, e.g., “VuukleAPI” and save. (Do this for all other variables needed)

    \n

    Default variable list you can check Here

    \n

    Advanced variable list Here

    \n
    4. \n
  4. \n

    Go to Tags and create a new custom HTML tag.

    \n

    \n \n \n \n \n

    \n
    5. \n
  5. In custom HTML tag use default integration code
    6. \n
  6. \n

    Use data layer variable names for apiKey, articleId, and other variables. For example apiKey: “{{VuukleAPI}}”

    \n

    \n \n \n \n \n

    \n
    7. \n
  7. \n

    On triggering chose all pages, page view.

    \n

    Target Pages Steps

    \n
    8. \n
  8. \n

    Add GTM container as instructed by Google changing last “dataLayer” to the name you want (this is important to don’t mess with other gtms installed on the page. Here I used “Vuukle_dataLayer”.

    \n

    \n \n \n \n \n

    \n
    9. \n
  9. On the line right above GTM container add data layer declaration:
    10. \n
\n
<script>\n  Vuukle_dataLayer = [\n    {\n      VuukleAPI: 'api key', //replace with real api key\n      VuukleArticleID: 'article id', //replace with real article id\n    },\n  ];\n</script>
\n

You can check DEMO page here

","frontmatter":{"title":"How to integrate Vuukle using Google Tag Manager","date":"May 01, 2017","category":"Install Vuukle","tags":["how to","install","GTM"],"shortDescription":"Vuukle plugins integration via Google Tag Manager"}}},"pageContext":{"id":"b8934c39-0c1c-51b2-afac-c5b3e62c2f38"}}}