Multi-language setup using the Google Tag Manager

Introduction

Using the Tagmanager to manage advanced Userlike setups? Check out our new Widget Router feature, which is as powerful but easier to set up and maintain! More on Userlike Widget Routing

The following steps of this tutorial will explain to you how you can deploy two or more Chat Widgets to implement a multi-language setup for your website using the Google Tag Manager.

A Chat Widget is always bound to one specific language and Operator Group. For a multi-language setup you need one Chat Widget per language and a logic that loads the specific Chat Widgets based on your language selection. This is done using the Google Tag Manager. We are going to use URL pattern rules to trigger the specific Chat Widgets.

Preface

There are probably three common ways to implement multilingual sites.

TypeDescriptionEnglishGerman
Top Level DomainUse dedicated TLD per languageuserlike.comuserlike.de
SubdomainUse a subdomain prefix per languageen.userlike.comde.userlike.com
URL PatternEncode the language within the urluserlike.com/enuserlike.com/de

Step 1

It is necessary to install the Tag Manager script. If you haven't done it yet, please take a look at this tutorial. If you have already successfully installed the Tag Manager script then go straight to the next step.

Step 2

Login to your Tag Manager Dashboard and create a new tag.

Step 3

In this example, we named our Chat Widget "English". Choose "Custom HTML Tag" as the tag type and paste your Userlike Widget Code into the HTML section. Make sure to check the option "Support document.write" and to save your tag.

Step 4

Create another tag for you second Chat Widget. We named our second Chat Widget "German" and pasted the Userlike Widget Code of our German Chat Widget into the HTML field. Again it is necessary to check the option "Support document.write". Repeat this step for every additional language.

Step 5

Now add a Firing Rule for the first tag. Therefore, we add the rule "starts with" that match all URLs starting with "/en". We use the url "http://fantastic-support-crew.squarespace.com/en/" in our example.

Step 6

Add another Firing Rule for the second tag. Again, use the rule "starts with" that will match all URLs starting with "/de". We use the URL "http://fantastic-support-crew.squarespace.com/de/" in our example. Repeat this step for every additional language.

Step 7

You are done and can publish your setup.