Preference Center mit Marketing Cloud umsetzen – Sprache und Übersetzungen

Willkommen zum dritten und letzten Teil unserer Blog-Reihe „Preference Center mit Marketing Cloud umsetzen". Diesmal möchte ich euch zeigen, wie man ein solches Preference Center mit verschiedenen Sprachen umsetzt.

 Vorbereitungen

Voraussetzung ist, dass ihr bereits ein Preference Center mit Marketing Cloud gebaut habt. Das haben wir euch bereits in Teil 1 - Grundaufbau und Teil 2 - Design & Layout dieser Blog-Reihe gezeigt. Ausserdem solltet ihr natürlich wissen, in welche Sprachen ihr euer Preference Center übersetzen wollt und im Idealfall habt ihr auch schön die jeweiligen Vokabeln parat.

 Sprach-Parameter

Zunächst müssen wir einen Weg finden, wie wir der Cloud Page (also die Seite, in welcher das Preference Center umgesetzt wurde) die Sprache übergeben. Am einfachsten funktioniert das über einen Parameter im Link der Cloud Page, z. B. als ?lang=de für Deutsch. Diesen Parameter kann man dann mit Hilfe von AMPScript wie folgt auslesen:

/* 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 

Danach steht uns der URL-Parameter lang als @language zur Verfügung. 

Sprache erkennen (via Browser)

Wer möchte, dass die Sprache automatisch erkannt wird, kann mit Hilfe von JavaScript die Sprache des Browsers des Besuchers auslesen. Dafür wird die language-Variable als Frontend-Variable zur Verfügung gestellt und das folgende JavaScript-Snippet setzt den Sprach-Parameter via Browser-Sprache: 

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;
} 

Sprache erkennen (via Abonnent) 

Da wir hier mit einem Preference Center mit bereits bekannten Abonnenten arbeiten, ist uns die Sprache oft bereits bekannt. Daher macht es ggf. Sinn, die Sprache vom Abonnenten zu nehmen. In unserem Fall speichern wir die Sprache beim jeweiligen Abonnenten in der Data Extension ab. Die Sprache lesen wir dann wie folgt von dort aus und übergeben sie so als Sprach-Parameter und leiten so entsprechend zur korrekten Sprache um:

// 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 ]%% 

Wir ersetzen dabei den Teil var lang = null im vorher gezeigten JavaScript. 

Übersetzungen anlegen 

Wir haben nun die Möglichkeit, eine Sprache zu setzen, entweder via Browser oder über die Abonnenten-Sprache. Nun brauchen wir nur noch die Übersetzungen. Diese legen wir als JSON-File in den Cloud Page-Assets an. Diese sieht dann z. B. so aus:

{
  "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"
  }
} 

Nun möchten wir z. B. den Submit-Button über  %%=v(@translation_label_submit)=%% in der Cloud Page übersetzen. Das funktioniert aber leider nicht Out of the box. Dazu müssen wir zunächst ein kleines SSJS-Script in die Cloud Page einfügen:

<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> 

Beachtet hier die korrekte URL (Zeile 19 im obigen Code), wir nutzen unsere Translation-Files im Format translation_de.json (für Deutsch) etc. 

Das obige Script setzt die Übersetzungen dann rekursiv mit einem Unterstrich zusammen und erzeugt eine entsprechende Variable. Diese Variable beginnt mit translation, danach folgen die jeweiligen Ebenen, wie z. B. @translation_label_submit, wobei @translation der Start ist, label die erste Ebene und submit die zweite Ebene in der JSON-File.

Und damit sind wir auch schon fertig. Nun könnt ihr euer Preference Center auch mit Übersetzungen ausstatten. Zusammen mit dem Teil 1 - Grundaufbau und Teil 2 - Design & Layout unserer Blogreihe solltet ihr damit einen guten Einstieg finden, ein eigenes Preference Center in Marketing Cloud umzusetzen.

Möchtest du die neuesten Best-Practices und Tipps rund um Marketing Automation direkt in deinen Posteingang erhalten? Dann schreib dich am besten gleich unten auf der Seite zu den regelmässigen praktischen News an.