Heads up! We have a new documentation site and this article has been rewritten.

Check out the latest version of this article →

 

This article shows you how to implement Tweakwise using Google Tag Manager. This implementation uses the standard javascript implementation, as described in this article.

Step 1: Preparation

To prepare, you need to make sure that the input and output elements on the page have unique IDs. You can read how to do this in step 1 of the aforementioned article.

Step 2: Installation

The script can be installed by placing a snippet in the right place in Google Tag Manager. To do this, create a new tag in GTM with a descriptive name, for example, 'Tweakwise'. This tag has the 'Custom HTML' type and the 'All pages' trigger.

Input the following snipper in the HTML field and replace "INSTANCEKEY" with your own unique key. You can find this key in the Tweakwise App under Connectivity > Endpoints.

<script type="text/javascript">


  (function (w, d, l, i, u) {


    w[l] = {

      instancekey: i,

    };


    var f = d.getElementsByTagName('script')[0],


    j = d.createElement('script');


    j.async = true;


    j.src = u;


    f.parentNode.insertBefore(j, f);


  })(window, document, "twn-starter-context", "INSTANCEKEY", "https://navigator-group1.tweakwise.com/js/starter.js");


</script>

 

The tag will look like this:

Save the created tag.

Step 3: Configuration

Configure the input, output, and any other options, as mentioned in step 3 of the aforementioned article.

Step 4: Styling

It's possible to edit the implementation's default theme by adding a custom stylesheet. This could include editing fonts and/or colors. Add the following snippet to the just created tag from step 2 and replace the contents with your own CSS.

<style>


    CUSTOM CSS HERE


</style>

 

Step 5: Publication

To apply the changes, you need to publish the GTM environment.