Das Integrations-Snippet | Der Bootstrap-Loader | Die Content-Definition | Skizzierung eines Plugins
Dieser Artiekl richtet sich an Entwickler, die ein Plugin für die Integration der Formate von contentbird Convert erstellen sollen und hierfür die direkte Integration des Javascript-Snippets verwenden möchten.
Das Integrations-Snippet
Der Redakteur erhält im Backend von contentbird Convert für jede Kampagne ein individuelles Integrations-Snippet, welches beispielhaft so aufgebaut ist:
<script type="text/javascript" src="//delivery.contentbird-convert.com/lucc.min.js"></script>
<div data-contilla-webapp="0e012d2d2e303d73787e375d" data-contilla-webapp-type="quiz" data-contilla-webapp-css-id="836">
<p><img src="//delivery.contentbird-convert.com/images/ajax_wait.gif" alt=""/> ...</p>
<p>Bitte einen Moment Geduld.<br />Das <a href="https://de.contentbird.io/contentbird-convert/" target="_blank" style="text-decoration:none;" title="Content">Quiz</a> wird geladen ...</p>
</div>
Der Bootstrap-Loader
Das Snippet enthält zunächst den Bootstrap-Loader, der sich um das Laden des eigentlichen contentbird Convert-Formates und gegebenenfalls benötigter Bibliotheken wie JQuery kümmert, falls diese nicht bereits in der Zeite verfügbar sind:
<script type="text/javascript" src="//delivery.contentbird-convert.com/lucc.min.js"></script>
Unabhängig wie viele Formate auf einer Webseite eingebunden werden sollen, wird dieser auf der Webseite nur einmal benötigt und sollte wie heutzutage üblich am Seitenende eingebunden werden. Der Bootstrap-Loader kann entweder bei Bedarf oder aber pauschal auf den Webseiten integriert werden. Das Script wird lediglich aktiv, wenn eingebundene contentbird Convert-Format-Container auf der Seite gefunden werden und führt selber keinerlei Tracking des Clientbrowsers aus. Insgesamt sollte er auch keinen nennenswerten Einfluss auf die Performance der Seite haben.
❗ Hinweis
Bitte sorgen Sie dafür, dass der Bootstrap-Loader von Caching-Mechanismen des CMS ignoriert wird. Nur so können wir sicherstellen, dass gegebenenfalls notwendige Änderungen für alle Kunden ausgespielt werden.
Die Content-Definition
Der Rest des Snippets enthält in den Attributen des DIV-Containers die Aufrufparameter für die konfigurierte Kampagne:
<div data-contilla-webapp="0e012d2d2e303d73787e375d" data-contilla-webapp-type="quiz" data-contilla-webapp-css-id="836">
<p><img src="//delivery.contentbird-convert.com/images/ajax_wait.gif" alt=""/> ...</p>
<p>Bitte einen Moment Geduld.<br />Das <a href="https://de.contentbird.io/contentbird-convert/" target="_blank" style="text-decoration:none;" title="Content">Quiz</a> wird geladen ...</p>
</div>
❗ Hinweis
Beachten Sie, dass dieses Beispiel nicht zwingend alle aktuellen und/oder zukünftigen Attribute abbildet und auch nicht alle Formate sämtliche hier verwendeten abgebildeten Attribute einsetzen müssen. Übernehmen Sie daher unbedingt alle Attribute des DIV-Containers an der gewünschten Position in die Seitenstruktur.
Die inneren Elemente im DIV-Container dienen nur als Platzhalter in der Seite, damit der Endnutzer erkennt, dass an dieser Stelle noch ein Inhalt eingefügt/nachgeladen wird. Sobald das Format startet, werden diese Elemente aus dem Container entfernt und durch das DOM des Formates ersetzt.
Der Bootstrap-Loader ermittelt nach dem initialen Rendern des Seiten-DOM ("on DOM ready") alle Convert-Containerelemente der Webseite, lädt die benötigten Formatscripte nach und startet sie entsprechend auf dem jeweiligen Container.
Skizzierung eines Plugins
Als Entwickler könnten Sie dem Redakteur ein Eingabefeld anbieten, in welches der Redakteur entweder den vollständigen Snippet oder aber nur die Content-Definition einfügen kann. Sie extrahieren daraus die Attribute des Containerelementes und speichern diese geeignet ab. Beim Rendern der Seite rekonstruieren Sie den Container an der gewünschten Position in der Seite und fügen das Scripttag für die Einbindung des Bootstrap-Loaders am Seitenende ein.