Skip to content
Vuukle Docs

Install Vuukle via Google Tag Manager

If your site is already running Google Tag Manager (GTM), you can deploy Vuukle as a GTM tag instead of editing your article template. Per-article values (article ID, title, URL) come from the GTM data layer.

GTM setup

  1. Create a GTM container (or use your existing one).

  2. Create user-defined data layer variables for each Vuukle parameter you’ll need. At minimum:

    • VuukleAPI (your public API key)
    • VuukleArticleID
    • Optionally: VuukleTitle, VuukleURL, VuukleImg, VuukleTags

    See VUUKLE_CONFIG reference for the full list.

  3. Create a Custom HTML tag in GTM. Paste the standard JavaScript install snippet, but replace the literal values with GTM variable references:

    <script>
      var VUUKLE_CONFIG = {
        apiKey: '{{VuukleAPI}}',
        articleId: '{{VuukleArticleID}}',
        title: '{{VuukleTitle}}',
        url: '{{VuukleURL}}',
        img: '{{VuukleImg}}',
        tags: '{{VuukleTags}}',
      };
      (function () {
        var d = document, s = d.createElement('script');
        s.async = true;
        s.src = 'https://cdn.vuukle.com/platform.js';
        (d.head || d.body).appendChild(s);
      })();
    </script>

  4. Set the trigger to All Pages → Page View.

  5. Publish your GTM container.

Page-side setup

  1. Install the GTM container script per Google’s standard instructions.

  2. Rename the dataLayer variable so it doesn’t collide with other GTM containers — for example to Vuukle_dataLayer.

  3. Just above the GTM container snippet, push the per-article values:

    <script>
      Vuukle_dataLayer = [{
        VuukleAPI: 'YOUR_PUBLIC_API_KEY',
        VuukleArticleID: 'post-12345',
        VuukleTitle: 'How to grow a tomato in winter',
        VuukleURL: 'https://example.com/blog/grow-tomato-winter',
      }];
    </script>

  4. Add the widget div anchors anywhere in your article template:

    <div id="vuukle-comments"></div>
    <div id="vuukle-emote"></div>
    <div class="vuukle-powerbar"></div>
Was this page helpful?
Help us improve — drop a note or open the dashboard.
Email support Open dashboard ↗ Suggest an edit ↗