Integration von Attractify am Beispiel eines Blogs - Teil 2

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.

Schritt 1: Zielgruppe definieren

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.

Schritt 2: Eine Action erstellen

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.

Schritt 3: Erstellen von Actions mit Webcomponents

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.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

@Component({
  tag: 'event-info',
  styleUrl: 'event-info.css',
  shadow: true,
})

export class EventInfo {
  @Prop() action: any;

  @Element() el: HTMLElement;

  componentDidLoad() {
    addIntersectionObserver(this.el, this.action.callbacks.show);
  }

  onCloseClick = () => {
    document.querySelector('event-info').shadowRoot.querySelector('#topBanner').classList.add('hide');
    this.action.callbacks.hide();
  };

  onAcceptClick = (_e: any) => {
    this.action.callbacks.accept();
  };

  render() {
    return (
      <Host>
        <div id="topBanner">
          <div id="cta">
            <span>{this.action.properties.text}</span>
            <a href={this.action.properties.url} class="link" onClick={e => this.onAcceptClick(e)}>
              <ino-button inoDense="true" inoColorScheme="primary" inoFill="outline">Anmeldung</ino-button>
            </a>
          </div>
          <ino-icon-button ino-color-scheme="light" ino-icon="close" onClick={this.onCloseClick}></ino-icon-button>
        </div>
      </Host>
    );
  }
}

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.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

export function addIntersectionObserver(el: HTMLElement, callback) {
  let io = new IntersectionObserver((data: any) => {
    if (data[0].isIntersecting) {
      callback();
      io.disconnect();
      io = null;
    }
  });
  io.observe(el);
}

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:

Schritt 4: Die Action im Skript laden

Um die Webcomponents im Integrationsskript verwenden zu können müssen diese im head Element geladen werden, wie das Attractify SDK auch.

1
2
3
4
5
6
7
8

  let webcomponents = document.createElement("script");
  webcomponents.src = "http://localhost:3333/build/attractify.esm.js";
  webcomponents.type = "module";
  document.querySelector("head").appendChild(webcomponents);
  webcomponents = document.createElement("script");
  webcomponents.src = "http://localhost:3333/build/attractify.js";
  webcomponents.noModule = true;
  document.querySelector("head").appendChild(webcomponents);

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.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

const appendElement = (target, element) => {
  target?.parentElement.insertBefore(element, target.nextSibling);
};

const addEventCTA = (action) => {
  let elem = document.createElement("event-info");
  elem.action = action;
  let target = document.querySelector("header");
  appendElement(target, elem);
};

const handleActions = () => {
  attractify.actions().then((actions) => {
    for (const action of actions) {
      if (action.type === "eventCTA") {
        addEventCTA(action);
      }
    }
  });
};

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