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.

   

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}}”

   

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

   

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