In this article the implementation of the Mopinion script using the Google Tag Manager will be explained. There is also a more modern way of implementing the script using the Mopinion Deployment template in GTM.
Google Tag Manager (GTM) is a free tag management system. Instead of implementing the Mopinion Deployment Code (MDC) directly into your web pages' HTML code, you can install the tag manager script once and control the Mopinion script within Google.
Prerequisites:
GTM account
GTM container installed on your webpages
Please refer to https://support.google.com/tagmanager/answer/6103696 and https://tagmanager.google.com for installing Google Tag Manager. Once you have GTM set up on your domain, you can implement the Mopinion Deployment Code.
You start by creating a new tag in GTM.
Give your tag a convenient name, so you know it is used to load the Mopinion Deployment Code.
Click on the 'Tag Configuration' button to proceed to add the Mopinion Deployment Code.
...
Select the 'Custom HTML' tag type.
...
Open in another browser tab your Mopinion environment. Go to 'Data Collection' -> 'Deployments'.
...
Click on the '<>' icon to retrieve the Mopinion Deployment Code.
...
A modal, which contains the Mopinion Deployment Code, will open. Copy the code.
The code below is an example. Your code will have a unique var id.
...
| Code Block |
|---|
<!-- Mopinion Pastea.se start --><script type="text/javascript">(function(){var id="MDC_unique_key";var js=document.createElement("script");js.setAttribute("type","text/javascript");js.setAttribute("src","//deploy.mopinion.com/js/pastease.js");js.async=true;document.getElementsByTagName("head")[0].appendChild(js);var t=setInterval(function(){try{new Pastease.load(id);clearInterval(t)}catch(e){}},50)})();</script><!-- Mopinion Pastea.se end --> |
Paste the Mopinion Deployment Code in the tag in the Google Tag Manager and hit 'SAVE'.
...
Now that the Mopinion Deployment Code is linked to the tag you can set the condition when the tag should be fired by clicking the 'Trigger Configuration' button.
...
You can then either choose one of your existing triggers or create a new one. We are going to create a new one by clicking on the '+' button.
...
You are then asked to select the type. There are 3 types that fire based on events that take place during the loading of the page. More information on the diffent types can be found on https://support.google.com/tagmanager/answer/7679319.
...
We opt for the 'Window Loaded' type. Since we want the Mopinion Deployment Code to be loaded on all pages of the domain we select that the trigger fires on ‘All Window Loaded Events’.
...
Your tag is now equipped with your unique Mopinion Deployment Code and a trigger to load the tag on every page. Hit 'SAVE’ to proceed to publish your tag.
...
In the overview of your workspace you see that 2 changes are ready for publication. You can either 'PREVIEW' or 'SUBMIT' the changes directly. If you 'PREVIEW' the changes only you or the people you invite can see the changes in your domain.
...
On a URL where the tag is loaded in preview mode, you should see a Google Tag Manager pane that showcases that the Mopinion Deployment Code tag has been fired on the event 'Window Loaded'.
...
Once satisfied with changes, you can 'SUBMIT' them and make them available for all your visitors. Before you 'PUBLISH' the changes you are asked to name the version with the changes. We would advise to give it a clear name and description, so you know this version hold the Mopinion Deployment Code.
...
Recap
There are 4 steps to start running Mopinion software using Google Tag Manager:
Create a tag containing the Mopinion script.
Create a trigger that determines on which pages tags should be loaded.
Create a version to save a history of your changes.
Publish the version so that it is actively running on your site.