vioma INTERACTIVE Overlays - Pflegetipps

Schön, dass Sie sich für vioma INTERACTIVE Overlays (Kurzform: VIOs) entschieden haben. Mit diesen Overlays haben Sie eine Vielzahl von Möglichkeiten, Besuchern Ihrer Webseite Zusatzinfos und verfügbare Angebote zu präsentieren.

Da die Einrichtung über unterschiedliche Pflegemöglichkeiten erfolgen kann, wollen wir Ihnen hier ein paar Tipps und Tricks an die Hand geben, um den Umgang mit den Overlays zu meistern.

1. Wo finde ich die Overlays?

Damit der Einstieg für Sie möglichst leicht fällt, haben wir Ihnen eine unsichtbare Unterseite im Condeon angelegt. Diese heißt in aller Regel vioma INTERACTIVE Beispiele, oder ähnlich.

Darunter finden Sie weitere Unterseiten, die jeweils ein Beispiel direkt anzeigen lassen.

Diese Beispielseiten sind gleichzeitig Ihre Testseiten. Hier können Sie ganz unproblematisch die Inhalte nach Belieben umändern oder neue hinzufügen, um sie zu testen.

Die Inhaltsbereiche der Seiten sind an sich leer, bis auf den neu angelegte Bereich: vioma INTERACTIVE Overlays. Dieser neue Bereich befindet sich in aller Regel am Ende der Seite, wo sich dann ein gepflegtes Element drin befindet.

2. Pflegebeispiele

2.1. Artikelelement

Beispiel, anhand eines Artikelelements:

Artikel sind geeignet für:
Sofort und super wichtige Infos, etwa Warnlagen, Anfahrtsprobleme, oder geänderte Öffnungszeiten.

Sie sehen also, die Pflege eines Overlays unterscheidet sich kaum von der Pflege anderer Inhalte, wie Sie es bereits gewohnt sind.

Weitere Pflegebeispiele anderer Elemente:

2.2. Media Anzeigen

Media Anzeigen sind geeignet für:
Einzelne Empfehlungen, die keine ähnlichen Empfehlungen aufzeigen und keine direkten Angebote aus der CST sind. Etwa, wenn man auf Gutscheine verweisen möchte, oder zu einem bestimmten Event.

2.3. Galerien (Bildslider)

Galerien sind geeignet für:

Mehrere Verlinkungen und Themen, die aber ein gemeinsames Überthema haben.
Oder, wenn man auf mehrere Angebots-Möglichkeiten verweisen will (etwa Zimmerkarte, Pauschalenkarte und Gutscheinkarte)

2.4. CST Zimmerslider

Zimmerslider sind geeignet für:
Spezielle Landingpages ohne direktes Urlaubsthema, oder wenn aktuell keine Pauschalangebote verfügbar sind.

2.5. CST Zimmerdetail

CST Zimmerdetail ist geeignet für:
Ganz besondere Zimmer, oder ganz besondere Landingpages, für die ein Zimmer gemacht ist. Etwa für eine Familienurlaub-Landingpage, um das eine Familienzimmer zu bewerben.

2.6. CST Pauschalenslider

Pauschalenslider eignen sich für:
Exit Intent Layer, also wenn der Nutzer die Seite verlassen will. Auf quasi jeder Unterseite.
Außerdem themenbasiert auf den Unterseiten. Etwa ein Pauschalenslider nach 10 Sekunden Inaktivität auf der Wanderseite mit dem Themenindikator “wandern” mit entsprechenden Wanderpauschalen.

Diese Ansicht ist so umfangreich, dass wir in Punkt 3 noch mal gesondert darauf eingehen.

2.7. Pauschalendetail

CST Pauschalendetails sind geeignet für:

Explizite Angebote, die noch schnell angepriesen werden sollen
Lückenfüller-Pauschalen
7=6 ÜN Pauschalen
Pauschalen, die das ganze Jahr über buchbar sind

Ist eine Pauschale nicht buchbar …
… wird sie möglicherweise trotzdem ausgespielt. Das kann dann zu einer schlechteren User Experience führen, da der Besucher das Angebot nicht buchen kann.
Daher ist die Pflege mit Pauschalenslider eher empfohlen.

3. Besonders empfehlenswert: Pauschalenslider als Exit Intent Overlay

Nach unseren Erkenntnissen sind besonders Urlaubsangebote in einem Exit Intent beliebt. Das bedeutet, Besucher Ihrer Webseite klicken mit einer überproportional hohen Wahrscheinlichkeit auf Overlays, wenn ihnen suggeriert wird, dass sie jetzt noch ein spezielles und kurzfristiges Top Angebot erhalten.

Entsprechend sind Pauschalenlisten für ein Exit Intent Overlay geradezu geeignet. Diese Overlays geben dem Besucher noch mal eine (letzte) Möglichkeit, doch noch ihren Urlaub in Ihrem Hause zu buchen.

Empfehlungen - Do’s

Legen Sie einen eigenen Indikator für die Overlays an. Über diesen Indikator können Sie ausschließlich Pauschalen in den Overlays ausspielen, die speziell dafür geeignet sind.

Fügen Sie Pauschalen hinzu, bei denen der Gast 7 oder mehr Übernachtungen bucht. Das Wellness-Wochenende ist sicher auch ganz nett, aber Sie wollen damit verkaufen und keine Lücken füllen.

Es kristallisiert sich raus, dass die erste Pauschale mit dem Thema Wellness am besten zieht - insbesondere wenn ein blauer Pool auch zu sehen ist.

Schnäppchen-Angebote, etwa 7=6 Übernachtungen oder 10% Frühbucher-Sparangebot sind als Alternative empfehlenswert.

Bieten Sie alternative Themen an: Sie können etwa eine Wellness-, eine Aktivurlaub-, eine Familien- und eine Spar-Angebot-Pauschale in den Indikator bringen. Mit Ausnahme von speziellen Themenseiten haben Sie dann vieles abgedeckt. “Nur Wellnesspauschalen” geben keine Alternativen für Sportler oder Familien.

Möglicherweise kann es Sinn machen, nur für diese Overlays spezielle Pauschalen neu anzulegen, also Pauschalen, die explizit nur in den Exit Overlays angezeigt werden.

Achten Sie darauf, dass mindestens eine Pauschale aufgelistet ist, die ganzjährig und praktisch immer buchbar ist.

Besser nicht machen - Dont’s

Verwenden Sie besser keine Angebote, die nur eine oder zwei Übernachtungen ermöglichen. Und auch keine, bei denen keine Familien oder Partner mit dazu buchen könnten.

Achten Sie darauf, dass die Bilder im Format 530 x 320 Pixel zugeschnitten werden. Das ist etwa das Format 16:9, eher 5:3. Bilder im Hochformat sind bei Pauschalen möglicherweise ungeeignet und werden abgeschnitten.

Wenn zu wenige Pauschalen in einen Slider eingebunden werden, kann es sein, dass der Slider gar nicht mehr angezeigt wird, wenn keine Pauschalen mehr buchbar sind. Wenn Sie einen Indikator einsetzen, sollten Sie auch darauf achten, dass diese Pauschalen buchbar bleiben, oder neue Pauschalen hinzukommen.

4. Einstellungen für die Overlays

Nicht jedes Overlay ist gleich wichtig und nicht jedes möchte gleich angezeigt werden. Daher haben wir Möglichkeiten geschaffen, wie Sie ganz einfach alternative Ansichten für die vioma INTERACTIVE Overlays einstellen können.

Ihnen stehen drei Einstellungen zur Verfügung, welche in den Modul-Einstellungen unter den Inhaltsattributen zu finden sind:

4.1. VIO: Anzeigen …

Über ein Dropdown können Sie angeben, wann das Overlay erscheinen soll. Sie können hier einstellen, dass ein Overlay sofort angezeigt werden soll, nach einer bestimmten Zeit (etwa 10, 20 oder 30 Sekunden), oder beim Verlassen der Seite.

Alle zeitbasierten Overlays werden üblicherweise nach X Sekunden Inaktivität angezeigt. Wird keine individuelle Einstellung vorgenommen, taucht das Overlay automatisch nach 10 Sekunden Inaktivität auf.

Beim Verlassen der Seite ist der Exit Intent. Dieser erscheint, sobald der Nutzer die Seite verlassen möchte.

Exit Intent Overlays warten darauf,

dass man die Seite mit der Maus nach oben hin verlässt, also Richtung Tabs und Adresszeile fahren will
oder dass die Seite nicht mehr im Fokus steht, weil man den Tab gewechselt hat oder ein anderes Programm / eine andere App in den Vordergrund gebracht wird.

_{Javascript: document wartet auf 'mouseleave' Event, window wartet auf ‘pagehide’ und 'visibilitychange’ Event.}

4.2. VIO: Kopfzeile

Eingabefeld für die anpassbare Kopfzeile / den Titel der Overlay-Karte. Über das Feld VIO: Kopfzeile können Sie, wie im Beispiel, einen individuellen Titel angeben, etwa “Anfahrthinweis”.

Per Standard wird ausgegeben:

Das könnte Sie interessieren..?
Extra für Sie ausgewählt (bei CST Integrationen)

4.3. VIO: Variante

In den Varianten können Sie aus einem Overlay-Typen wählen:

4.4. Pflegetipps für die Einstellungen

Während kleinere Overlays möglicherweise weniger auffallen, sind großflächige Overlays häufig zu penetrant - User wollen nicht in ihrem Lesefluss gestört werden. Daher sind Variante A oder Variante B ein guter Kompromiss aus beiden Welten.

Versetzen Sie sich immer in die Lage des Users. Sie kennen das ja selbst: Sie wollen etwas lesen, und dann kommt plötzlich eine nervige Newsletter-Anmeldung die man erst weg drücken muss, sowas mag keiner.

Bei einem Exit Intent ist das anders. Hier möchte man gegebenenfalls eine größere Darstellung, Variante B oder Variante D haben, um auf spezielle “Produkte” ein möglich letztes mal aufmerksam zu machen.

Alle zeitgesteuerten Overlays, außer “sofort”, warten erst auf Inaktivität des Nutzers. Wenn der Nutzer etwa nicht mehr die Maus bewegt oder nicht mehr scrollt, ab dann zählen die Sekunden hoch. Wird die Seite in dieser Zeit wieder “benutzt”, wird der Zähler zurückgesetzt. Wird die eingestellte Zeitspanne der Inaktivität erreicht, wird das Overlay angezeigt.

Begründung: Der Nutzer befindet sich aktuell wohl noch aktiv im Lesefluss. Ihn darin zu stören kann eine negative User Experience auslösen.

Wenn Sie “sofort”, also ohne Zeitverzug, Overlays anzeigen, sollte das für die User Experience einen driftigen Grund haben. Straßensperrung, Schließung oder ähnlich starken Gründe.

Denken Sie daran: Die Nutzer sind wegen der Seiteninhalte auf Ihre Website gekommen. Die Inhalte das Overlays sind für den Nutzer in erster Linie sekundär.

5. So gehen Sie in der Pflege am besten vor

Die vioma INTERACTIVE Overlays haben die Eigenschaft, dass sie sich merken, wenn sie geschlossen werden oder mit ihnen interagiert wurde. In diesen Fällen wird das Overlay für diese Session nicht mehr angezeigt. Der Nutzer muss also erst zu einem späteren Zeitpunkt wieder auf die Seite zurückkommen, um ein Overlay erneut angezeigt zu bekommen.

Interagiert ein Nutzer mit dem Overlay oder schließt es, ist es ein starkes Zeichen dafür, dass entweder das Angebot angesehen wurde, oder uninteressant ist. In beiden Fällen macht es keinen Sinn, das gleiche Overlay nochmals auszuspielen.

Da dieses Verhalten für Sie bei der Pflege und dem Testen suboptimal ist, empfehlen wir Ihnen, die Overlays auf den Beispielseiten anzusehen und zu testen. Dort haben Sie jederzeit die Möglichkeit, die Overlays direkt ausgespielt zu bekommen, ohne Einschränkung in der Ausgabe. Das heißt, Sie können hier neue Overlays hinzufügen und testen. Wir empfehlen, das direkt auf dem Menüpunkt vioma INTERACTIVE Beispiele zu machen. Somit können Sie die Beispielseiten unverändert lassen und später jederzeit dort nachsehen, wie Sie ein Element pflegen müssen.

5.1. Unsere empfohlene Reihenfolge für die Pflege:

Gehen Sie im Condeon Backend auf die Unterseite vioma INTERACTIVE Beispiele.
Legen Sie ein neues Element im Inhaltsbereich vioma INTERACTIVE Overlays im Condeon Backend an.
Pflegen Sie dieses wie gewünscht.
Über den Link oben rechts können Sie die Seite aufrufen.
Das Overlay erscheint dort immer und sofort. Die Ausgabe-Einschränkungen für Exit Layer, bzw. Anzeigen nach X Sekunden greifen hier nicht.
Wenn Sie mit der Darstellung zufrieden sind, fügen Sie bei Bedarf noch die Einstellungen für die Anzeige oder Variante hinzu.
Verschieben Sie jetzt das Element an die gewünschte Unterseite.
Wenn Sie das Element vererben wollen, etwa eine Exit Intent Pauschalenliste, dann müssen Sie das Inhaltselement in den Modul-Einstellungen vererben.

Da auf allen anderen Unterseiten (außerhalb der Testseiten) die Vorschau-Funktion nicht funktioniert, greifen die zeitbasierten Einstellungen wann ein Overlay erscheint.

Wurde ein Overlay geschlossen, oder ein Link / ein Button im Overlay geklickt, wird dieses Overlay ab dem Moment (innerhalb der aktuellen Session) nicht mehr erscheinen. Erst wenn der Nutzer die komplette Seite / den Tab schließt und später wieder neu die Website öffnet, kann das Overlay erneut ausgespielt werden.

6. Sonstige Infos und Tipps

Ein paar Infos sind noch wichtig zu wissen, die anderweitig nicht gut untergebracht werden konnten.

6.1. Klick Event Tracking

Die Overlays kommen mit eingebautem Klick Event Tracking für Google Analytics 4 und Matomo einher. Diese müssen Sie nicht aktivieren, die sind einfach da.

In Google Analytics finden Sie Auswertungen unter:
Berichte ➞ Engagement ➞ Ereignisse

Erfasst werden:

event_category: vioma INTERACTIVE
event_label: Der Linktext, oder die Überschrift in einer Karte. Etwas, was das deutlicher auswertbar macht.
value: 1 (ein Klick).
vio_variant: Welche Variante benutzt wurde (A, B, C oder D)
vio_condeon_id: Die eindeutige ID des Condeon Elements
vio_condeon_element: Welche Art von Inhalt es war (article, media-display, gallery, cst)

Beachten Sie, dass mindestens event_category und event_label in den Google Analytics 4 Einstellungen als Benutzerdefinierte Dimension hinterlegt wurden. Sonst sind die Daten nicht auswertbar.
Sie finden diese unter Verwaltung ➞ Datenanzeige ➞ Benutzerdefinierte Dimensionen

In Matomo werden äquivalente Ereignisse übermittelt.

6.2. “Spamschutz” für die Besucher Ihrer Webseite

Was Besucher sicherlich nicht mögen werden ist, wenn sie vor lauter Overlays den Inhalt Ihrer Seite nicht mehr erfassen können. Daher wurden zwei wichtige Limits pro Besuch eingerichtet, die helfen sollen, keine negative Nutzererfahrung zu hinterlassen.

Pro Seitenaufruf wird maximal 1 zeitgesteuertes Overlay angezeigt.
Pro Besuch (Session) werden maximal 3 zeitgesteuerte Overlays insgesamt angezeigt.
Exit Intent Overlays werden dabei separat behandelt, es kann also ein zweites Overlay pro Seitenaufruf angezeigt werden, wenn ein zeitgesteuertes Overlay und ein Exit Intent Overlay gefeuert werden.
Außerdem wird das aktive Schließen, oder der Klick auf einen Link in einem Overlay als Signal gewertet, dass der Nutzer entweder kein Interesse daran hatte, oder den Inhalt schon gesehen hat. In beiden Fällen macht es keinen Sinn, das Overlay noch mal anzuzeigen.

6.3. Datenschutz

Die gemerkten Overlays werden in die sogenannte sessionStorage gespeichert. Sobald die Session endet, werden die gemerkten Overlays gelöscht und beim nächsten Besuch wieder angezeigt.

Es werden nur die IDs der Condeon Objekte gespeichert. Personenbezogene Daten werden nicht gespeichert.

^{sessionStorage Namen: _vioma_vio_exits, _vioma_vio_overlays}
^{Beispiel: ["vio__template__1234567","vio__template__1234568"]}

Für das Klick Event Tracking ergeben sich keine Probleme. Denn bevor es abgeschickt wird, wird geprüft, ob Google Analytics oder Matomo auf der Seite selbst existiert. In den Fällen hat der Nutzer dem Tracking entweder zugestimmt, oder der Tracking Code ist schon anderweitig eingebaut worden.

Die vioma INTERACTIVE Overlays haben selbst keinen eingebauten Tracking Code. Sie benutzen nur auf der Webseite bereits vorhandene / geladene Funktionen, um an Google Analytics 4 oder Matomo Infos zum Klick zu senden. Sind diese nicht vorhanden, kann auch nichts gesendet werden.

^{if (typeof gtag === function) {gtag(…)}}
^{if (typeof paq === function) {paq.push(…)}}