Wil je de Chat widget verbergen op een mobiel apparaat? Dat kan via Google Tag Manager dit artikel legt je uit hoe je dit kan instellen.
Hou er rekening mee dat door de widget niet te tonen op mobiele apparaten, mis je namelijk de chatfunctionaliteit voor een deel van je websitebezoekers. Overweeg daarom of dit echt wenselijk is. Je Customer Success Manager denkt graag met je mee over alternatieve oplossingen.
Stap 1: Variabelen aanmaken
- Ga naar Variabelen en klik op "Nieuw"
- Geef de Variabele een naam bijvoorbeeld: Hide on Mobile device.
- Selecteer de paginavariabele "Aangepaste JavaScript-macro"
- Kopieer en plak het volgende script
function () {
var a = navigator.userAgent || navigator.vendor || window.opera;
if (/(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|phone)|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))) { return true; }
return false;
} - Laat de notatie waardes leeg
- Klik op "Opslaan".
Stap 2: Variabelen koppelen aan trigger
- Ga naar "Triggers" en klik op "Nieuw"
- Geef de trigger een naam bijvoorbeeld Trigger- Hide on mobile device
- Selecteer aangepaste gebeurtenis onder overig
- Geef de gebeurtenis de naam .* en vink "Overeenkomende reguliere expressie gebruiken" aan. ❗️Let op: vul in het naamveld echt een puntje en een sterretje in. Zonder werkt de code niet.
- Selecteer "Sommige aangepaste gebeurtenissen" en zet de triggers op "is niet gelijk aan" en "true"
- Klik op "opslaan"
stap 3 Tags
- Ga naar Tags en klik op *Nieuw*
- Geef de Tag een naam bijvoorbeeld: Watermelon Chat Widget
- Onder Tagconfirguratie klik je op "Aangepaste HTML"
- Plak de Chat Widget Code vanuit Watermelon hierin.
- Vink "document.write ondersteunen" aan.
- Onder Triggers kies je de net aangemaakte trigger.
- Klik op "Opslaan"
Stap 4: Verzenden, publiceren en testen
- Klik op "Verzenden" en selecteer "Versie publiceren en maken" geef de versie een naam
- Klik op "Publiceren"
- Ga naar de website op een mobiel apparaat en test of de widget inderdaad niet toont.