Das Auge sieht nicht alles, was wichtig ist 😉
Jedes unserer Tools beinhaltet Funktionen die offensichtlich und anhand einer einfachen und übersichtlichen UX zu bedienen sind.
Aber nicht alles, was einen Nutzen und positiven Effekt auf die Erstellung und Verwendung von unseren Elementen hat, ist sichtbar in der Benutzeroberfläche vorhanden.
Wichtig: Die folgenden Embed-Codes gelten für Pinpoll v1. Zur Verwendung mit Pinpoll v2 ist data-attribut="v2" zu ergänzen.
Vorbeugung gegen Manipulation
Eine dieser versteckten Funktionen ist z.B. das Mischen von Fragen und Antworten in Quizzes und Abstimmungen mit mehreren Fragen und Antworten.
Dazu bedarf es lediglich einer kleinen Ergänzung im Embed-Code des Elements:
Quiz:
<div data-pinpoll-id="xxxxxx" data-mode="quiz" random-questions="true" random-answers="true"></div>
Abstimmung (mit mehr als 1 Frage und mehr als 2 Antworten):
<div data-pinpoll-id= "xxxxxx" random-questions="true" random-answers="true"></div>
Der Nutzen dahinter ist ganz einfach erklärt: Bots sind meist darauf trainiert wiederholt denselben Befehl auszuführen. Wenn die Fragen und Antworten jedoch bei jedem Aufruf immer wieder neu durchgemischt werden, erschwert es die Manipulation von spezifischen Antwortmöglichkeiten, zumindest für Klick-Bots und Menschen, die manuell immer wieder abstimmen möchten.
+ hoher Schutz gegen Klick-Bots
~ mittlerer Schutz gegen Manipulation durch Menschen
– geringer Schutz gegen API-Bots
Und für den User bleibt es somit auch spannend, wenn dieser das Quiz oder die Abstimmung erneut durchspielen möchte, um sich beispielsweise zu verbessern.
Data-Attribute: Mehr Kontrolle über deinen Pinpoll-Platzhalter
Mit Data-Attributen kannst du das Verhalten und Design deiner Pinpoll-Elemente direkt im Code deiner Integration steuern. Sie ermöglichen dir mehr Flexibilität, um Darstellung, Ladeverhalten und Funktionalitäten individuell anzupassen.
Wir haben dir hier einen Überblick über die Möglichkeiten zusammengestellt:
Eigene CSS-Klassen mit data-css-class nutzen
Mit dem Attribut data-css-class kannst du deiner Umfrage (<body>-Tag) zusätzliche CSS-Klassen zuweisen. Damit erhältst du volle Flexibilität, um dein Custom-Design-Stylesheet gezielt zu steuern und unterschiedliche Designvarianten umzusetzen.
Wofür ist das nützlich?
Designvariationen umsetzen: Nutze eigene Klassen, um einzelne Umfragen optisch an ein bestimmtes Thema oder Layout anzupassen – ohne dafür ein komplett neues Stylesheet zu erstellen.
Themen & Kampagnen kennzeichnen: Verleihe deinen Polls ein einheitliches Aussehen für bestimmte Events, Kanäle oder Specials.
Beispiele
Themen-Special „Sport“ kennzeichnen:
data-css-class="sport"
Mehrere Klassen kombinieren:
data-css-class="sport highlight"
Wie funktioniert’s?
Alle hier definierten Klassen stehen dir anschließend im CSS-Code deiner Custom Designs zur Verfügung. Dort kannst du die gewünschten Stile genau auf diese Klassen zuschneiden – zum Beispiel unterschiedliche Farben, Schriften oder Hintergründe.
Design überschreiben mit data-design
Mit dem Attribut data-design="{custom-design-id}" kannst du das vom Redakteur ursprünglich ausgewählte Design überschreiben und stattdessen ein anderes, von dir definiertes Design laden.
Wann ist das nützlich?
Wenn du für bestimmte Kampagnen oder Themen ein einheitliches Design erzwingen möchtest.
Wenn ein spezielles Layout (z. B. Darkmode oder Corporate Design) unabhängig von der Auswahl des Redakteurs angezeigt werden soll.
Wenn du testweise verschiedene Designvarianten ausspielen möchtest, ohne die Standardkonfiguration zu ändern.
Beispiel
<div data-pinpoll-id="xxxxxx" data-design="45"></div>
In diesem Beispiel wird das vom Redakteur gewählte Design ignoriert und stattdessen das Design mit der ID 45 angewendet.
Lademodus festlegen mit data-loading
Mit dem Attribut "data-loading" kannst du steuern, wann und wie ein Pinpoll-Element geladen wird. Damit lässt sich die Performance deiner Seite optimieren und gleichzeitig beeinflussen, wie schnell Inhalte für User sichtbar werden.
Optionen im Überblick:
lazy (Standard): Das Element wird erst geladen, kurz bevor es in den sichtbaren Bereich der Seite kommt. → Empfohlen für bestmögliche Performance.
eager: Das Element wird sofort geladen – auch dann, wenn es noch nicht im sichtbaren Bereich ist. → Nützlich, wenn Inhalte direkt beim Seitenaufruf verfügbar sein sollen.
preload: Das Element wird vorgeladen, allerdings ohne Zähl- oder Ad-Requests auszuführen. → Achtung: Diese Einstellung erfordert eine explizite Initialisierung über das Pinpoll Embed SDK.
Beispiel
<div data-pinpoll-id="xxxxxx" data-loading="lazy"></div>
Wann ist welcher Parameter sinnvoll?
lazy: Für die meisten Standard-Integrationen, da es die Ladezeit optimiert.
eager: Wenn Umfragen oder Quizzes direkt beim Aufruf sichtbar und nutzbar sein sollen.
preload: Für komplexere Setups, bei denen Inhalte gezielt im Hintergrund vorbereitet werden, bevor sie sichtbar werden.
Automatisches Laden weiterer Elemente mit "data-autoplay"
Mit dem Attribut "data-autoplay" kannst du steuern, dass nach einem Voting automatisch weitere passende Elemente angezeigt werden. Dadurch bleiben User länger im Flow und interagieren stärker mit deinen Inhalten.
Funktionsweise
Dieser Parameter lädt nach dem Voting weitere, passende Elemente:
vom gleichen Typ (Poll/Quiz/PT) und
erstellt von Benutzern, die derselben Organisation angehören.
Bevorzugt werden die Elemente, die:
in den letzten 5 Tagen erstellt wurden,
häufig abgestimmt wurden („beliebt sind“),
aus derselben Kategorie stammen,
vom aktuellen Besucher noch nicht abgestimmt wurden,
die passende Höhe haben (erfordert das Setzen von data-height) und
falls verfügbar: Polls desselben Pfads bei KI-Polls (URL-Matching).
Beispiel
<div data-pinpoll-id="xxxxxx" data-autoplay="3"></div>
In diesem Beispiel werden nach dem Voting automatisch bis zu 3 weitere passende Elemente geladen.
Zusatzparameter: data-mute-voted
Mit "data-mute-voted" kannst du zusätzlich steuern, ob im Autoplay-Modus bereits abgestimmte Elemente ausgeschlossen werden.
true / 1 → Bereits beantwortete Elemente werden nicht erneut geladen.
false / 0 → Auch bereits beantwortete Elemente können wieder erscheinen.
Beispiel
<div data-pinpoll-id="xxxxxx" data-autoplay="3" data-mute-voted="true"></div>
In diesem Beispiel werden nach dem Voting automatisch bis zu 3 neue, passende Elemente geladen, wobei bereits beantwortete ausgeschlossen bleiben.