Hi,
hat jemand eine Lösung für eine Sprachauswahl, wenn Browsersprache nicht deutsch ist? Gedacht habe ich an ein JavaScript im Head oder Footer welches ein Overlay mit schön gestalteter Sprachauswahl öffnet.
Das Plenty Sprachauswahl Widget lässt leider den CLS Werte nach oben schießen, daher wieder raus genommen.
Bedingung, keine negativen SEO Auswirkungen, keine Bastelei, sollte schonmal irgendwo aktiv und stabil laufen.
Freue mich auf Vorschläge.
Moin @Axel,
dann würde ich eigentlich das Standard Widget nehmen und schauen, dass man den CLS Wert entsprechend behebt. Wenn es von der Funktionalität her passt für dich.
Matthias von der webimpact® GmbH
www.webimpact.io
office@webimpact.io
+49 (0) 2974 77 999 99
Hi Matthias,
grundsätzlich passt die Funktion. Allerdings ist der CLS Wert die letzten Wochen nach oben, bzw. der CLS ist 0, aber in den letzten 30 Tagen: Core Web Vitals-Bewertung: nicht bestanden
CLS mobil bei 0,14 und Desktop 0,12. Da man das ja nicht Tagesaktuell messen kann ich die Fehlersuche schwierig.
Welche Möglichkeiten gibt es denn das originale Widget positiv zu beeinflussen?
Das wäre möglich, wenn man z.B. sowas einbaut.
Ich denke das größte Problem, bei der Sprachauswahl von Plenty ist immer die Möglichkeit, darüber auch das Lieferland zu wählen, was natürlich auch nicht optimal gelöst ist.
Das Script wäre jetzt darauf ausgelegt Popup und Funktion verzögert darzustellen.
Man könnte es noch erweitern, ich hab jetzt z.B. keinen Button erzeugt, der zeigt welche Sprache aktuell aktiv ist.
Ist eine Version die ich schon länger nicht mehr im Einsatz hab, da ich die Seite mal off genommen hab, müsste aber alles abgedeckt sein, was man oft mal benötigt.
Ich würde aber grundsätzlich erst einmal schauen, ob es möglich ist, die CLS-Probleme in dem Widget behoben werden können.
(function() {
const defaultLanguage = "de";
const supportedLanguages = [
{ code: "de", url: "https://example.com/" },
{ code: "en", url: "https://example.com/en/" },
{ code: "fr", url: "https://irgendwas-mit-brot.com/" },
{ code: "es", url: "https://example.com/es/" },
{ code: "it", url: "https://example.com/it/" },
{ code: "nl", url: "https://example.com/nl/" }
];
const browserLanguages = navigator.languages || [navigator.language];
let popupCreated = false;
// Hilfsfunktionen für Cookies
function setCookie(name, value, days) {
const d = new Date();
d.setTime(d.getTime() + (days*24*60*60*1000));
const expires = "expires="+ d.toUTCString();
document.cookie = name + "=" + value + ";" + expires + ";path=/";
}
function getCookie(name) {
const cname = name + "=";
const decodedCookie = decodeURIComponent(document.cookie);
const ca = decodedCookie.split(';');
for(let i = 0; i < ca.length; i++) {
let c = ca[i].trim();
if (c.indexOf(cname) === 0) {
return c.substring(cname.length, c.length);
}
}
return "";
}
// Popup erzeugen
function createPopup() {
if (popupCreated) {
document.getElementById("languagePopup").style.display = "block";
return;
}
popupCreated = true;
const popup = document.createElement("div");
popup.id = "languagePopup";
const title = document.createElement("h2");
title.textContent = "Bitte Sprache auswählen";
popup.appendChild(title);
const optionsContainer = document.createElement("div");
popup.appendChild(optionsContainer);
// Sortiere Sprachen nach Browserpräferenz
sortedLanguages.forEach(langObj => {
const btn = document.createElement("button");
btn.textContent = langObj.code.toUpperCase();
btn.onclick = () => {
// Cookie für 30 Tage setzen
setCookie("selectedLanguage", langObj.code, 30);
// Weiterleitung zur individuellen URL
window.location.href = langObj.url;
};
optionsContainer.appendChild(btn);
});
document.body.appendChild(popup);
popup.style.display = "block";
}
// Automatisches Popup nur, wenn kein Cookie gesetzt ist
if (!getCookie("selectedLanguage") && !browserLanguages[0].toLowerCase().startsWith(defaultLanguage)) {
let popupTriggered = false;
function triggerPopup() {
if (!popupTriggered) {
popupTriggered = true;
createPopup();
window.removeEventListener("scroll", triggerPopup);
}
}
setTimeout(triggerPopup, 3000);
window.addEventListener("scroll", triggerPopup);
}
// Manueller Button, wenn man das irgendwo per Klick starten will.
document.getElementById("openPopupBtn").addEventListener("click", createPopup);
})();
Hi Kevin,
danke für deinen Vorschlag. Sieht passend aus.
Grundsätzlich geht es darum, dass der Kunde bei Erstaufruf, wenn noch kein Cookie gesetzt ist und die Browsersprache von der des Seitenaufrufs abweicht, sich eine Sprachauswahl öffnet.
Ob das über das Plenty Widget läuft oder oder auf einen anderen Weg ist mir grundsätzlich egal.
Vorraussetzung, keine Beeinträchtigung der Ladezeiten und keine Verschiebung / CLS.
Wenn du eine Lösung hast, sende mir gerne eine direkte Nachricht.