Schließen-Schaltfläche hinzufügen

Wenn Ihr Creative in einem Desktop- oder mobilen Browser ausgeliefert wird, müssen Sie eine Schließen-Schaltfläche hinzufügen, damit die Nutzer das Creative schließen und auf den Seiteninhalt unter der Anzeige zugreifen können.

Schließen-Schaltfläche in Google Web Designer hinzufügen

1. Erstellen Sie eine Schaltfläche oder ein anderes deutliches visuelles Element für eine Schließen-Schaltfläche, auf das der Nutzer klicken oder tippen kann. Bei textbasierten Schließen-Schaltflächen wird normalerweise der Text "X schließen" verwendet.
2. Ziehen Sie die Komponente der Interaktionsfläche aus dem Komponenten- in den Anzeigebereich und platzieren Sie sie über dem Element für die Schließen-Schaltfläche.
3. Klicken Sie im Ereignisbereich auf die neue Ereignisschaltfläche.
4. Wählen Sie im Ereignisdialog folgende Optionen aus:

   Ziel	Komponente der Interaktionsfläche (gwd-taparea_1)
   Ereignis	Interaktionsfläche > Berühren/Klicken
   Aktion	Benutzerdefiniert > Benutzerdefinierte Aktion hinzufügen

5. Geben Sie im Fenster "Benutzerdefinierter Code" einen Namen für die benutzerdefinierte Funktion ein, zum Beispiel "closead". Fügen Sie dann folgenden Code in das entsprechende Feld ein:
   Enabler.reportManualClose();
Enabler.close();
6. Klicken Sie auf OK.

 

Schließen-Schaltfläche mit HTML, CSS und JavaScript hinzufügen

1. Erstellen Sie in Ihrem Creative mit einem <div>-Tag ein Schaltflächenelement. Erstellen Sie das Element in der HTML-Datei und konfigurieren Sie dessen Stil in der CSS-Datei. Weisen Sie dem Element dann die ID close-btn zu.

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

   <div id="close-btn"></div>

   Beispiel für einen ID-Selektorstil in der CSS-Datei

   #close-btn {
     position: absolute;
     width: 20px;
     height: 18px;
     top: 0px;
     left: 278px;
     cursor: pointer;
     z-index:220;
     background-image: url('close.png');
     background-repeat: no-repeat;
   }

2. Fügen Sie dem JavaScript-Code die Methoden reportManualClose und close hinzu, um das Creative zu schließen und die manuellen Schließungen zu erfassen.

   Beispielcode für das Schließen des Creatives und das Erfassen des Ereignisses

   function closeHandler() {
     Enabler.reportManualClose(); 
     Enabler.close();
   }
   
   document.getElementById('close-btn').addEventListener('click', closeHandler, false);
   

Schließen-Schaltfläche ausblenden, wenn das Creative in einer App ausgeliefert wird

Wenn das Creative in mobilen Apps ausgeliefert wird, blenden die Anzeigen-SDKs der mobilen App automatisch eine eigene Schließen-Schaltfläche über das Creative ein. Wenn Sie bereits eine Schließen-Schaltfläche in Ihrem Creative haben, hat das Creative zwei Schließen-Schaltflächen. Verwenden Sie zum Ausblenden der MRAID-Schließen-Schaltfläche die Enabler-Methode setUseCustomClose.

var hideMRAIDClose = function() {
  if (studio.common.Environment.hasType(
      studio.common.Environment.Type.IN_APP)) {
    // MRAID-Schließen-Schaltfläche ausblenden und stattdessen die Creative-Schließen-Schaltfläche verwenden
    Enabler.setUseCustomClose(true);
  }
};