Anleitung zur Erstellung von HTML5-Floating-Creatives

Timer hinzufügen

Mit einem Timer können Sie die Länge einer beliebigen Aktion im Creative messen, zum Beispiel, wie lange ein Nutzer ein Spiel spielt.

Dabei sollten Sie überlegen, durch welche Interaktionen ein Timer gestoppt werden soll. Wenn Sie zum Beispiel messen möchten, wie lange ein Nutzer ein Spiel spielt, sollte der Timer gestoppt werden, wenn er auf eine Schaltfläche zum Schließen oder einen Exit klickt. Der Timer muss immer dann gestoppt werden, wenn der Nutzer das Spiel beendet oder die Seite verlässt.

Timer mit Google Web Designer hinzufügen

  1. Klicken Sie im Steuerfeld „Ereignisse“ auf das Pluszeichen (+), um ein Ereignis dem gewünschten Objekt zuzuweisen.
  2. Wählen Sie im Pop-up-Fenster mit den Ereignissen die Objektinstanz als Quelle aus.
  3. Wählen Sie Interaktionsschaltfläche und dann Berühren/Klicken aus.
  4. Klicken Sie im selben Pop-up-Fenster im Steuerfeld „Aktion“ auf Google Anzeige und dann auf Timer starten.
  5. Klicken Sie im Steuerfeld „Empfänger“ auf gwd-ad.
  6. Geben Sie im Steuerfeld „Konfiguration“ die Messwerte-ID ein, die Sie für das Tracking verwenden möchten. Notieren Sie sich diese ID, da Sie sie zum Stoppen des Timers benötigen.
  7. Wiederholen Sie die Schritte, um den Timer zu stoppen. Verwenden Sie hierbei die in Schritt 6 angegebene Messwert-ID.
  8. Klicken Sie auf Speichern. Der Tracking-Code wird anhand Ihrer Angaben automatisch eingefügt. Sie brauchen den Quellcode später also nicht zu überarbeiten.
  9. Rufen Sie die Vorschau der Anzeige in Ihrem bevorzugten Browser auf.
  10. Veröffentlichen Sie die Anzeige in Studio.

Timer mit einem beliebigen HTML-Editor hinzufügen

  1. Erstellen Sie in Ihrem Creative mit <div>-Tags zwei Schaltflächenelemente. Erstellen Sie die Elemente in der HTML-Datei und konfigurieren Sie deren Stil in der CSS-Datei. Weisen Sie dann verschiedene IDs für start-timer und stopp-timer zu.

    Beispiel für <div>-Tag-Objekt in der HTML-Datei:

    <div id="start-timer">START TIMER</div>
    <div id="stop-timer">STOP TIMER</div>

    Beispielstil und ID-Selektor in der CSS-Datei:

    #start-timer {
        position: absolute;
        width: 130px;
        height: 20px;
        top: 60px;
        left: 25px;
        cursor: pointer;
    }
    
    #stop-timer {
        position: absolute;
        width: 130px;
        height: 20px;
        top: 85px;
        left: 25px;
        cursor: pointer;
    }
  2. Starten Sie einen Timer mit dieser JavaScript-Methode: Enabler.startTimer(timerId:String);
  3. Stoppen Sie einen Timer mit dieser JavaScript-Methode: Enabler.stopTimer(timerId:String);
    • timerId ist der Name des Timers, der in Berichten angezeigt wird. Verwenden Sie einen Namen, mit dem Sie den Timer der damit erfassten Aktion zuordnen können. Sie können den Timer umbenennen, wenn Sie das Creative in Studio hochladen oder in Campaign Manager 360 trafficken.
    • Damit der Timer gestoppt wird, muss die timerId, die in stopTimer verwendet wird, der ID in startTimer entsprechen. Bei der ID wird zwischen Groß- und Kleinschreibung unterschieden. Verwenden Sie daher jeweils genau denselben String.
    • Damit Sie diese Methoden verwenden können, müssen Sie zuerst den HTML5-Enabler hinzufügen und initialisieren.

Code-Snippet

function startTimerHandler(e) {
    Enabler.startTimer('My Timer');
}
document.getElementById('start-timer').addEventListener('click',
startTimerHandler, false);

function stopTimerHandler(e) {
    Enabler.stopTimer('My Timer');
}
document.getElementById('stop-timer').addEventListener('click',
stopTimerHandler, false);
 

War das hilfreich?

Wie können wir die Seite verbessern?

Benötigen Sie weitere Hilfe?

Mögliche weitere Schritte:

Suche
Suche löschen
Suche schließen
Hauptmenü
6473495244877542444
true
Suchen in der Hilfe
true
true
true
true
true
74220
false
false