Need help with Vuukle?🤔

This is the place you are looking for!

How to integrate Vuukle using Google Tag Manager

Updated over a month ago

GTM Steps

  1. Create the GTM container

  2. Go to Variables and create a new user defined data layer variable.

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

    Default variable list you can check Here

    Advanced variable list Here

  4. Go to Tags and create a new custom HTML tag.

    how to integrate vuukle with gtm img 1

  5. In custom HTML tag use default integration code

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

    how to integrate vuukle with gtm img 3

  7. On triggering chose all pages, page view.

    Target Pages Steps

  8. 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”.

    how to integrate vuukle with gtm img 2

  9. On the line right above GTM container add data layer declaration:

<script>
  Vuukle_dataLayer = [
    {
      VuukleAPI: 'api key', //replace with real api key
      VuukleArticleID: 'article id', //replace with real article id
    },
  ];
</script>

You can check DEMO page here