So verwenden Sie das neue mehrsprachige Snippet mit automatischer Spracherkennung

Wir führen ein neues Snippet mit automatischer Spracherkennung ein, um die Einbettung auf Ihrer Website zu vereinfachen. Diese erweiterte Funktion in unserer Privacy Controls and Cookie Solution erkennt automatisch die Sprache des Nutzers, so dass Sie nicht mehr für jede Sprache einen eigenen Code-Snippet hinzufügen müssen. In dieser Anleitung erfahren Sie mehr über diese neue Funktion und lernen, wie sie sie implementieren können.

Wichtige Änderungen im neuen Snippet

Wenn Sie die mehrsprachige Funktion aktivieren:

Einheitliches Snippet: Sie müssen ab sofort nur noch ein einziges Snippet einbetten, anstatt es für jede Sprache zu kopieren und einzufügen.
Automatische Spracherkennung: Das Snippet erkennt die Sprache und wendet sie automatisch an:

Erkennt die Sprache über anhand des -Tags.
Durchsucht die Spracheinstellungen des Browsers, wenn auf der Seite keine Sprache angegeben ist.
Weicht auf Englisch aus, wenn keine der oben genannten Optionen funktioniert.

Bettet das neue Snippet ein.

Hier ist die grundlegende Syntax für das neue Snippet mit automatischer Spracherkennung:

<script type="text/javascript">
var _iub = _iub || [];
_iub.csLangConfiguration = {
  "en": {
    "cookiePolicyId": 12345 // Cookie policy ID for English
  },
  "it": {
    "cookiePolicyId": 23456 // Cookie policy ID for Italian
  },
};
_iub.csConfiguration = {
  "siteId": 09876, // Your site ID
"cookiePolicyId": 12345, // Cookie policy ID of the main language for fallback
"storage": {
    "useSiteId": true,
  }
};</script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>

So funktioniert es

Sprachenspezifische Konfiguration: Das csLangConfiguration-Objekt legt die IDs der Cookie-Richtlinien für jede Sprache fest.
Fallback-Mechanismus: Die cookiePolicyId in der csConfiguration dient als Ausweichmöglichkeit, falls keine Sprache erkannt wird.
Speicherung: Die Verwendung von useSiteId unter dem storage-Objekt bedeutet, dass die Einwilligung des Benutzers in verschiedenen Sprachen Ihrer Website gültig ist.

Verwendung des Snippets ohne remote-Konfiguration

Wenn die Remote-Konfiguration deaktiviert ist, stützt sich das Snippet vollständig auf die im _iub.csConfiguration-Objekt angegebenen Parameter. Die Syntax ist ähnlich wie bei der Version mit Remote-Konfiguration, jedoch werden alle Konfigurationen, einschließlich Bannereinstellungen, Sprachoptionen, Speicherung und Einwilligungsverhalten innerhalb des Skripts explizit angegeben.

Optimierungen und Anpassungen

Mit dem neuen Snippet können Sie das Einwilligungs-Banner mithilfe des csLangConfiguration-Objekts für jede Sprache anpassen. Das bedeutet, dass Sie das Aussehen und das Verhalten des Banners je nach Sprache des Nutzers anpassen können. Sehen wir uns einige gängige Anpassungen an.

Beispiel 1: Ändern des Banneraussehens je nach Sprache

Angenommen, Sie möchten, dass das Einwilligungs-Banner für jede Sprache eine andere Farbe hat, um Ihrer Website ein individuelles und sprachspezifisches Aussehen zu verleihen. In diesem Beispiel färbt sich das Banner für Nutzer, die die Website auf Italienisch aufrufen, rot:

<script type="text/javascript">
var _iub = _iub || [];
_iub.csLangConfiguration = {
  "en": {
    "cookiePolicyId": 12345
  },
  "it": {
    "cookiePolicyId": 23456,
    "banner": {
      "backgroundColor": "#FF0000"
    }
  },
};
_iub.csConfiguration = {
  "siteId": 09876,
  "cookiePolicyId": 12345,
  "storage": {
    "useSiteId": true,
  }
};</script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>

Beispiel 2: Sprachspezifische Schaltflächen zur Einwilligung

In einigen Ländern, wie z. B. Dänemark, müssen Nutzer bestimmte Einwilligungsoptionen sehen können. Sie können diese Optionen so konfigurieren, dass sie nur angezeigt werden, wenn die Sprache des Nutzers einer bestimmten Anforderung entspricht:

<script type="text/javascript">
var _iub = _iub || [];
_iub.csLangConfiguration = {
  "da": {
    "cookiePolicyId": 7896,
    "banner": {
      "showPurposesToggles": true
    }
  },
};
_iub.csConfiguration = {
  "siteId": 09876,
  "cookiePolicyId": 12345,
  "storage": {
    "useSiteId": true,
  }
};</script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>

Bitte beachten:

Standardmäßig verwendet das neue Snippet die Speicherung auf Site-Ebene (useSiteId: true), was bedeutet, dass die Nutzereinwilligung in den verschiedenen Sprachen Ihrer Website erkannt wird. Dies ist besonders nützlich für Websites mit globaler Präsenz, da Nutzer nicht jedes Mal ihre Einwilligung erteilen müssen, wenn sie die Sprache wechseln.

Sie können dieses Verhalten jedoch auch im Konfigurator unter „Erweiterte Einstellungen“ anpassen:

So bilden Sie das Snippet für jede Sprache nach (Legacy-Methode)

Wenn Sie es vorziehen, die vorhergehende Methode zu verwenden, bei der für jede Sprache ein eigenes Snippet verwendet wird (wie bei der vorhergehenden Einrichtung), können Sie dies weiterhin tun. Dieser Ansatz kann nützlich sein, wenn Sie die volle Kontrolle über die Konfiguration der einzelnen Sprachen haben möchten oder wenn Ihre Website-Struktur individuelle Snippets erfordert. So können Sie individuelle Snippets für jede Sprache erstellen:

Erstellen Sie für jede aktive Sprache mithilfe des _iub.csConfiguration-Objekts ein eigenes Snippet.
Fügen Sie die Sprache für jedes Snippet im Parameter "lang" hinzu.
Fügen Sie die sprachspezifische cookiePolicyId in jedes _iub.csConfiguration-Objekt ein.
Behalten Sie für jedes Snippet das Skript bei, das auf die iubenda_cs.js-Datei verlinkt.

Beispiel-Snippets für verschiedene Sprachen

Hier sehen Sie, wie Sie die Snippets sowohl für Englisch (en) als auch für Italienisch (it) strukturieren:

Englisch:

<script type="text/javascript">
var _iub = _iub || [];
_iub.csConfiguration = {
  "cookiePolicyId": 12345, // Fallback cookie policy ID
"siteId": 09876, // Site ID
"lang": "en",
  "storage": {
    "useSiteId": true,
  }
};</script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>

Italienisch

<script type="text/javascript">
var _iub = _iub || [];
_iub.csConfiguration = {
"cookiePolicyId": 23456, // Fallback cookie policy ID
"siteId": 09876, // Site ID
"lang": "it",
  "storage": {
    "useSiteId": true,
  }
};</script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>

Verwendung der GTM-Vorlage

Im Google Tag Manager (GTM) haben wir einen neuen Bereich für die Konfiguration von sprachspezifischen Einstellungen hinzugefügt. Diese optionale Funktion ermöglicht es Ihnen, verschiedene Konfigurationen direkt über GTM zu verwalten. Weitere Einzelheiten finden Sie in der Anleitung zur Einrichtung der GTM-Vorlage von iubenda für mehrsprachige Websites