StatusSupport
Developers
Tweakwise.comTweakwise AppContact

Installation

To get started with the JS Implementation add your personalized JavaScript file to the page.
Copy the following snippet into the <head> of your HTML.

<link rel="preload" as="script" href="https://gateway.tweakwisenavigator.net/js/starter.js" />
<link rel="preload" as="script" href="https://gateway.tweakwisenavigator.net/js/INSTANCEKEY/tweakwise.js" />

<script>window["twn-starter-config"] = window["twn-starter-config"] || {};</script>

<script>
  window.tweakwiseFailover = function (src) {
    var script = document.createElement("script");
    script.async = true;
    script.src = src;
    document.head.appendChild(script);
  };
</script>

<script
  src="https://gateway.tweakwisenavigator.net/js/INSTANCEKEY/tweakwise.js"
  data-failover="https://gateway.tweakwisenavigator.com/js/INSTANCEKEY/tweakwise.js"
  onerror="window.tweakwiseFailover(this.dataset.failover)"
></script>

After you have copied the snippet into your HTML replace INSTANCEKEY with your own instance key. You can find it on your Tweakwise App Dashboard.

📘

Note

Besides importing the JavaScript file the snippet tells the browser that the plugin should be loaded with a high priority. It also creates a fallback mechanism to an alternative domain. This is done to optimize the performance and stability of the solution.

How config information is processed

When Tweakwise JS has loaded, it will begin to process the twn-starter-config configuration object. Any changes to the object after initialisation will not have effect.

Important: the twn-starter-config configuration object is also for Suggestions JS, Recommendations JS and Guided Selling JS.

Google Tag Manager

It is possible to add the JS Implementation to your platform using Google Tag Manager (GTM). The process of adding the JS Implementation using GTM is mostly similar to adding it regularly. However, instead of adding the snippets directly to the HTML, we need to add it in GTM using a Custom HTML tag.

To get started, create a new Tag in GTM with the type Custom HTML and trigger it on All Pages. Give the tag a descriptive name so that it is clear it contains the Tweakwise JS Implementation.

Next, copy the following snippet into the HTML text field and replace INSTANCEKEY with your own instance key. You can find it in the Tweakwise App under Connectivity > Endpoints.

<script>window["twn-starter-config"] = window["twn-starter-config"] || {};</script>

<script>
  window.tweakwiseFailover = function (src) {
    var script = document.createElement("script");
    script.async = true;
    script.src = src;
    document.head.appendChild(script);
  };
</script>
<script
  src="https://gateway.tweakwisenavigator.net/js/INSTANCEKEY/tweakwise.js"
  data-failover="https://gateway.tweakwisenavigator.com/js/INSTANCEKEY/tweakwise.js"
  onerror="window.tweakwiseFailover(this.dataset.failover)"
></script>

🚧

Important

This is not the recommended way of implementing Tweakwise JS. some browsers or extensions are known to block Google Tag Manager.

Troubleshooting

Do not overwrite the window["twn-starter-config"] variable: when you use the configuration object directly (e.g. window["twn-starter-config"] = { instanceKey: 'abc' }, it will overwrite any existing values in the dataLayer. Tweakwise JS installations should instantiate the configuration as high up in the source code as possible, above the snippet, using window["twn-starter-config"] = window["twn-starter-config"] || {};. After the configuration object has been declared, use the existing object to add additional values to it.