Website widget automatisch laten openen op desktop/tablet (niet mobiel)

Aangezien de Website widget het gehele scherm van een mobiel inneemt wanneer deze open is, kan het wenselijk zijn dat de Website widget alleen op desktop en tablet automatisch opent. Met Google Tag Manager (GTM) is het mogelijk om de Website widget in te laden op jouw website en automatisch te openen op desktop en tablet, maar niet op een mobiel. In dit artikel leggen we uit hoe je dit instelt.
 
Voor meer informatie over het algemene gebruik van Google Tag Manager op jouw website, kun je kijken op het officiële helpcenter van de tool.
 
Met behulp van een javascript kan GTM detecteren of de website wordt geladen via een desktop, tablet of mobiel. Hieronder wordt in 4 stappen beschreven hoe je de tag in GTM creëert.

Stap 1

Ga naar de GTM Werkruimte en open variabelen. Hier kun je een nieuwe variabele aanmaken door op Nieuw te klikken.
Pas de nieuwe variabele aan en maak er een Aangepaste JavaScript-macro van en kopieer en plak onderstaande code in de variabele. Vergeet hierna niet de code een naam te geven en op te slaan.
 
function() {
var a = navigator.userAgent||navigator.vendor||window.opera;
return /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4))
}
 
 

Stap 2

Nu de variabele gemaakt is, moeten er triggers aangemaakt worden. Je gaat er twee aanmaken. Een trigger om te bepalen of de website geopend wordt op een mobiel en een trigger om te bepalen of de website geopend wordt op een desktop/tablet.

Je maakt nu als eerste de trigger die bepaalt of het een mobiel is.
  1. Open Triggers in het menu en klik op Nieuw
  2. Pas de nieuwe trigger aan en maak er een Paginaweergave van. 
  3. Stel nu een activatie in en kies voor Sommige paginaweergaven. Gebruik de variabele die je zonet hebt aangemaakt en zet de trigger op bevat true. Zie onderstaande afbeelding voor de uitvoering.
  4. Sla de trigger op en maak vervolgens de volgende aan.
Je gaat nu de trigger maken die bepaalt of het een desktop/tablet is.
  1. Open Triggers in het menu en klik opnieuw op Nieuw.
  2. Pas de nieuwe trigger aan en maak er een Paginaweergave van.
  3. Stel nu een activatie in en kies voor Sommige paginaweergaven. Gebruik de variabele die je zonet hebt aangemaakt en zet de trigger op bevat false. Zie onderstaande afbeelding voor de uitvoering.
  4. Sla de trigger op en je kan door naar de volgende stap.

Stap 3

De volgende stap is het aanmaken van twee tags. Deze tags zorgen ervoor dat de Website widget getoond wordt op jouw website en zullen aan de hand van de vorige twee stappen bepalen of het een desktop/tablet of mobiel is.
 
Open Tags in het menu en klik op Nieuw. Je gaat nu als eerste de tag aanmaken die ervoor zorgt dat de Website widget gesloten getoond wordt op een mobiel. Pas de Tagconfiguratie aan naar Aangepaste HTML en voeg hier jouw chatbot script toe.
 

Let op! In het script staat de regel ; window.Watermelon.toggled = false; Deze moet op false staan, zodat de Website widget automatisch gesloten blijft. 

 
De complete code ziet er dan bijvoorbeeld als volgt uit:
 
<script type="text/javascript">
    window.Watermelon = window.Watermelon || {};
    window.Watermelon.key = "pxxxu2d9xxx8s2tZnxxxtxxxWatTKphOxxxIKxxxhvbfoxxx7vtZxxxZixxb";
    window.Watermelon.toggled = false;
    (function(d,s) {
        s = d.createElement('script');
        s.type = 'text/javascript';
        s.async = true;
        s.src = "https://wm-livechat-2-prod-dot-watermelonmessenger.appspot.com/assets/js/wm_plugin.js";
        d.getElementsByTagName('script')[0].appendChild(s);
    }(document));
</script>
 
Vervolgens moet je onderaan de code het vakje document.write ondersteunen aanvinken.
 
Nu de tag is toegevoegd kun je de triggers toevoegen. Pas de trigger aan naar die waarmee de mobiel wordt gedetecteerd (de trigger met bevat true). Voeg vervolgens een Uitzondering toe en kies de trigger waarmee de desktop/tablet wordt gedetecteerd (de trigger met bevat false). Zie onderstaande afbeelding voor de uitvoering. Geef de tag een naam, sla deze op en je hebt nu de tag gemaakt waardoor jouw Website widget gesloten getoond wordt op een mobiel!
Je hebt nog één tag te gaan en dat is degene die ervoor zorgt dat jouw Website widget open getoond wordt op een desktop/tablet.
Open Tags in het menu en klik op Nieuw. Pas de Tagconfiguratie aan naar Aangepaste HTML en voeg hier jouw chatbot script toe.
 

Let op! In het script staat de regel ; window.Watermelon.toggled = true; Deze moet op true staan, zodat de Website widget automatisch geopend wordt.

 
De complete code ziet er dan bijvoorbeeld als volgt uit:
 
<script type="text/javascript">
    window.Watermelon = window.Watermelon || {};
    window.Watermelon.key = "pxxxu2d9xxx8s2tZnxxxtxxxWatTKphOxxxIKxxxhvbfoxxx7vtZxxxZixxb";
    window.Watermelon.toggled = true;
    (function(d,s) {
        s = d.createElement('script');
        s.type = 'text/javascript';
        s.async = true;
        s.src = "https://wm-livechat-2-prod-dot-watermelonmessenger.appspot.com/assets/js/wm_plugin.js";
        d.getElementsByTagName('script')[0].appendChild(s);
    }(document));
</script>
 
Vervolgens moet je onderaan de code het vakje document.write ondersteunen aanvinken.
 
Nu de tag is toegevoegd kun je de triggers toevoegen. Pas de trigger aan naar die waarmee de desktop/tablet wordt gedetecteerd (de trigger met bevat false). Voeg vervolgens een Uitzondering toe en kies de trigger waarmee de mobiel wordt gedetecteerd (de trigger met bevat true). Zie onderstaande afbeelding voor de uitvoering. Geef de tag een naam, sla deze op en je hebt nu de tag gemaakt waardoor jouw Website widget open getoond wordt op een desktop/tablet!

Stap 4

Goed gedaan, je bent er bijna! Nu je de tags af hebt, hoef je deze alleen nog maar te publiceren. Dit doe je door rechtsboven de pagina op Verzenden te klikken.
Vul hier een Versienaam en Versiebeschrijving in. De tag kan nu gepubliceerd worden!
 

Disclaimer: Het javascript dat gebruikt wordt om te registeren of een apparaat een desktop/tablet of mobiel is, is niet door onszelf ontwikkeld. Dit artikel is geschreven om jullie op weg te helpen met de mogelijkheden in Google Tag Manager, maar wij zijn niet de rechtmatige eigenaar van zowel de code als de tool.