Preference Center with Marketing Cloud – Language and Translations

Welcome to our third and last part of our Blog series "Preference Center with Marketing Cloud". This time I will show you, how to handle languages and translations in your Preference Center. 

 Preparations

For this you will need a working Preference Center in Marketing Cloud. We already showed you ways to do this in Part 1 - Basic Structure and Part 2 - Design & Layout of this blog series. You also should already know, which languages you need and you may want to have your first translations ready. 

Language parameter

First we need to find a way, to tell the Cloud Page (our Preference Center is using a Cloud Page) the correct language. The easiest way is to use a language URL parameter, for example as ?lang=de. You can use AMPScript to read this parameter:

/* Handle languages */
var @language
set @language = RequestParameter("lang") /* get translation on update view by user */
if empty(@language) OR (@language != 'de' AND @language != 'fr' AND @language != 'it') then
    set @language = 'de' /* fallback language */
endif 

After that the URL parameter lang is available as @language. 

Detect language (via Browser)

 If you want to detect the user language automatically, you can use JavaScript to read the client language of the used Browser. You need to create a variable as frontend variable and use the following JavaScript snippet to set the language parameter of the client:

var lang = null;
var url = new URL(window.location.href);
var params = new URLSearchParams(url.search);

// check if lang parameter is set
var langParamSet = false;
if (params.get('lang') != null) {
    langParamSet = true;
}

// get language from parameter
if (lang == null) {
    lang = params.get('lang');
}

// get language from current browser
if (lang == null) {
    var userLang = navigator.language || navigator.userLanguage;
    lang = userLang.substring(0, 2);
}

// redirect to current page with language parameter if not set
if (langParamSet == false) {
    var limiter = '?';
    if (window.location.href.indexOf('?') > 0) {
        limiter = '&';
    }
    window.location.href = window.location.href + limiter + 'lang=' + lang;
} 

Detect language (via Subscriber) 

We already use subscribers in our Preference Center. In that case we can also use the language of these subscribers. We already stored the language of each subscriber in our Data Extension. We can read this language and set the language variable this way:

// get data from data extension
set @subscriber_rows = LookupRows(@data_extension,"ID", @subscriber_key)
set @subscriber_row = row(@subscriber_rows, 1)

set @subscriber_language = field(@subscriber_row,"Language")

// ...

%%[ if @subscriber_key != '' AND @subscriber_language != '' then ]%%
<script type="text/javascript">
    var lang = '%%=v(@subscriber_language)=%%';

    if (lang == 'D') {
        lang = 'de';
    }
    if (lang == 'F') {
        lang = 'fr';
    }
    if (lang == 'I') {
        lang = 'it';
    }
</script>
%%[ else ]%%
<script type="text/javascript">
    var lang = null;
</script>
%%[ endif ]%% 

We replaced var lang = null of the JavaScript from before.

Create translations

Now we can set the language via Browser or via subscriber. But we still need to add the translations. We are using JSON-files for that, which we upload as Cloud page assets. This can look like this:

{
  "label": {
    "newsletter": "Bitte wählen Sie Ihre Newsletter-Abos aus:",
    "submit": "Abonnement aktualisieren",
    "unsubscribe": "Von allen Newsletter abmelden"
  },
  "error": {
    "newsletter": "Bitte wählen Sie mindestens einen Newsletter aus.",
    "interest": "Bitte wählen Sie mindestens ein Interesse aus.",
    "subscriber_missing": "Bitte rufen Sie das Subscription Center über den Link in Ihrer letzten Email auf, die Sie von uns erhalten haben"
  }
} 

If we want to translate the submit button, we use %%=v(@translation_label_submit)=%% in the Cloud Page. But this is not working out of the box, first we need to add this following SSJS snippet into our Cloud Page:

<script runat="server">
    Platform.Load("Core","1.1.1");

    try {
        // generate AMP translation variables from JSON
        function generateTranslationVariables(translations, prevKey) {
            for (var key in translations) {
                var newKey = prevKey + '_' + key;
                if (typeof translations[key] == 'string') {
                    Variable.SetValue("@translation" + newKey, translations[key]); // set AMPScript variables like @translation_[parent]_[child]...
                } else {
                    generateTranslationVariables(translations[key], newKey);
                }
            }
        }

        var language = Variable.GetValue("@language"); // get language from AMPScript

        var url = 'http://[Address_to_your_asset_files]/translations/translation_' + language + '.json'; // get translation json files from Marketing Cloud Cloudpages
        var headerNames = ["Accept-Encoding"];
        var headerValues = ["gzip, deflate, sdch, br"];
        var response = HTTP.Get(url, headerNames, headerValues); // we need to set the headers or we get strange formatted content

        var translationsContent = response.Content;
        var translations = Platform.Function.ParseJSON(translationsContent);

        generateTranslationVariables(translations, '');
    } catch(e) {
        Write(Stringify(e)); /* This is for debugging */
    }
</script> 

Check the translation URL variable. You can see, we are using the format like this: translation_de.json (for German).

This script generates variables recursively using underscore and the translation keys. It starts with translation, after that it's using the keys of each level. For example translation_label_submit, which starts with translation, uses the 1st level key label and 2nd level key submit.

And that's it! Now you can create your own Preference Center with language and translation handling. Together with Part 1 - Basic Structure and Part 2 - Design & Layout of our blog series, you should be able to build your own Preference Center using Marketing Cloud.

Would you like to receive the latest best practices and tips on Marketing Automation directly to your inbox? Then sign up for the regular practical news at the bottom of the page.