Im ersten Teil unserer Blog-Reihe zur Integration von Attractify in die inovex.de Webseite, haben wir Events definiert, um das Verhalten der Nutzer auf unserer Webseite zu beobachten. Dabei haben wir analysiert, wann Nutzer einen Blogpost lesen. Diese Information wollen wir nun nutzen, um mögliche Interessenten auf relevante Events wie Webinare, Konferenzen oder Meetups, aufmerksam zu machen.
In Attractify geschieht das über sogenannte Actions
. Diese Actions
werden an eine Zielgruppe ausgespielt und enthalten Informationen, die direkt in die User Experience
eingebettet werden. Wir möchten exemplarisch Leser unseres Blogposts zu Backend Technologien auf ein kommendes Meetup zum Thema Kubernetes aufmerksam machen. Das erreichen wir in drei Schritten: Zuerst müssen wir unsere Zielgruppe definieren. Anschließend müssen wir die Informationen zum Meetup über Attractify auspielen und letztlich in die Webseite einbinden.
Um Nutzer anhand diverser Kriterien in Zielgruppen zu unterteilen, werden in Attractify sogenannte Traits verwendet. Diese dienen dazu, Nutzern bestimmte Eigenschaften, zum Beispiel basierend auf Events
, zuzuschreiben. In Attractify wird zwischen Custom Traits
und Computed Traits
unterschieden.
Weitere Informationen zu Traits haben wir in einem früheren Blogpost zusammegefasst.
Um Leser von bestimmten Blogposts zu Identifizieren legen wir einen Computed Trait an. Die Attribute Name
und Key
sind frei wählbar und dienen zur Identifikation unseres Traits. Als Type
wählen wir Count Event
. Dieser Typ erlaubt es uns zu zählen, wie oft ein Event für einen Nutzer registriert wird. Im Feld Event Name
wählen wir unser Event Blog Article Read
aus dem ersten Teil der Blogpost Reihe aus.
Wir können unter Add event conditions...
auch als Bedingung festlegen, dass nur Event gezählt werden, die den oben genannten Blogeintrag betreffen.
Der Computed Trait gibt nun an, wie oft der Blogeeintrag zu Backend Technologien gelesen wurde. Testen können wir den Trait mit unserem Skript aus Teil 1 der Integration von Attractify. Wir “lesen” einfach den Blogpost. Dadurch sollte das Event im Event Log auftauchen und auch im Nutzerprofil unter User Profiles
sichtbar sein.
Unter dem Reiter Actions
legen wir eine Action
an. Dieser geben wir einen Namen so wie einen Typ. Der Typ wird später wiederverwendet, um die Action
in der Integration zu identifizieren. Als properties
übergeben wir einen Text und einen Link zur Veranstaltung, auf die wir Nutzer aufmerksam machen wollen.
Unter Targeting
können wir den zuvor definierten Computed Trait verwenden, um die Action nur an Nutzer auszuspielen, die mindestens einen Blogartikel aus der Kategorie “Backend Technologien” gelesen haben.
Wir können die Action nun “live” schalten, indem wir den Action State
auf Active
setzen. Damit wird die Action für zutreffende Nutzer in unserem Integrationsskript geladen.
Um die Action
in unsere Webseite einzubinden, verwenden wir Webcomponents. Das erlaubt uns Actions
unabhängig von einander und dem Integrationsskript zu entwickeln und auszuliefern. Das Werkzeug unserer Wahl ist hierbei Stencil. Zusätzlich verwenden wie die inovex Elements UI Bibliothek, um unseren Webcomponents ein einheitliches, modernes Design zu geben.
|
|
Sobald die Komponente geladen ist, wird ein IntersectionObserver
erstellt. Damit wird in Attractify die Action
als shown
markiert, sobald die Komponente im Viewport des Nutzers sichtbar ist.
|
|
Klickt ein Nutzer auf den Link zur Anmeldung, so soll die Action
in Attractify als accepted
markiert werden. Bei einem Klick auf den “Schließen” Button wird in Attractify die Callback-Methode hide()
ausgeführt. Mit diesen Informationen können wir in der Action
unter Capping
Limits festlegen, wie oft die Action
angezeigt werden soll. Somit verhindern wir, dass Nutzern Aktionen unnötigerweise mehrmals angezeigt werden.
Das fertige Banner sieht dann in etwa so aus:
Um die Webcomponents im Integrationsskript verwenden zu können müssen diese im head
Element geladen werden, wie das Attractify SDK auch.
|
|
Das Attractify SDK lädt bei Initialisierung alle auf den Nutzer zutreffenden Actions. Wir müssen letztlich nur unsere Webcomponents im DOM einfügen und ihnen die jeweilige action
als Input geben. In unserem Beispiel fügen wir die Komponente nach dem header
ein.
|
|
Viele Teile dieser Integration können für weitere Komponenten wiederverwendet werden. In unserer Integration haben wir den IntersectionObserver
in eine utils.ts
Datei ausgelagert.
Foto von Pankaj Patel auf Unsplash
Du hast eine Frage oder möchtest etwas loswerden. Schreibe uns gerne auf Twitter unter @attractifyio an.