Instant Experiences

Eine Instant Experience ist eine Vollbild-Darstellung, die sich nach dem Klicken auf eine Anzeige öffnet und praktisch sofort aus Werbeanzeigen im Feed geladen wird.

Bevor du beginnst

Zum Erstellen und Verwalten von Instant Experiences benötigst du Folgendes:

• Die Berechtigung pages_manage_ads
• Die Berechtigung pages_read_engagement
• Die Berechtigung pages_show_list
• Die Fähigkeit zur Ausführung der ADVERTISE-Aufgabe auf der Seite

Einschränkungen

• Du kannst nur unveröffentlichte Instant Experiences aktualisieren.
• Die Instant Experiences API ist eingeschränkt für Instagram verfügbar.
• Anzeigen mit Instant Experiences werden für Facebook Stories nicht unterstützt.

Erstellen

Zum Erstellen einer Instant Experience benötigst du die ID einer Facebook-Seite (PAGE-ID) und alle Elemente, die in deiner Experience enthalten sein sollen, z. B. Fotos, Buttons und Text.

use FacebookAds\Api;
use FacebookAds\Http\RequestInterface;

$params = array(
  'background_color' => 'FFFFFF',
  'body_element_ids' => array(<CANVAS_PHOTO_ID>),
  'is_hidden' => false,
  'is_published' => false,
  'name' => 'Canvas Name',
);

$data = Api::instance()->call(
  '/' . <PAGE_ID> . '/canvases',
  RequestInterface::METHOD_POST,
  $params)->getContent();

curl \
  -F 'background_color=FFFFFF' \
  -F 'body_element_ids=["<CANVAS_PHOTO_ID>"]' \
  -F 'is_hidden=' \
  -F 'is_published=' \
  -F 'name=Canvas Name' \
  -F 'access_token=<ACCESS_TOKEN>' \
  https://graph.facebook.com/v2.11/<PAGE_ID>/canvases

Elemente

Element löschen

Sende zum Löschen eines Elements eine DELETE-Anforderung mit der ID des zu löschenden Elements.

use FacebookAds\Api;
use FacebookAds\Http\RequestInterface;

$data = Api::instance()->call(
  '/' . <CANVAS_ELEMENT_ID>,
  RequestInterface::METHOD_DELETE,
  array())->getContent();

curl -X DELETE \
  -d 'access_token=<ACCESS_TOKEN>' \
  https://graph.facebook.com/v2.11/<CANVAS_ELEMENT_ID>

Vorhandene Instant Experiences abrufen

Um Informationen zu einer vorhandenen Instant Experience abzurufen, benötigst du die ID der Instant Experience (CANVAS-ID).

use FacebookAds\Api;
use FacebookAds\Http\RequestInterface;

$params = array(
  'fields' => array(
    'body_elements',
    'canvas_link',
    'id',
    'is_hidden',
    'is_published',
    'name',
  ),
);

$data = Api::instance()->call(
  '/' . <CANVAS_ID>,
  RequestInterface::METHOD_GET,
  $params)->getContent();

curl -G \
  --data-urlencode 'fields=[ 
    "body_elements", 
    "canvas_link", 
    "id", 
    "is_hidden", 
    "is_published", 
    "name" 
  ]' \
  -d 'access_token=<ACCESS_TOKEN>' \
  https://graph.facebook.com/v2.11/<CANVAS_ID>

Alle Instant Experiences für eine Seite abrufen

Um Informationen zu allen vorhandenen Instant Experiences für eine Facebook-Seite abzurufen, benötigst du die ID der Seite (PAGE-ID).

use FacebookAds\Api;
use FacebookAds\Http\RequestInterface;

$params = array(
  'fields' => array(
    'background_color',
    'body_elements',
    'canvas_link',
    'id',
    'is_hidden',
    'is_published',
    'last_editor',
    'name',
    'owner',
    'update_time',
  ),
);

$data = Api::instance()->call(
  '/' . <PAGE_ID> . '/canvases',
  RequestInterface::METHOD_GET,
  $params)->getContent();

curl -G \
  --data-urlencode 'fields=[ 
    "background_color", 
    "body_elements", 
    "canvas_link", 
    "id", 
    "is_hidden", 
    "is_published", 
    "last_editor", 
    "name", 
    "owner", 
    "update_time" 
  ]' \
  -d 'access_token=<ACCESS_TOKEN>' \
  https://graph.facebook.com/v2.11/<PAGE_ID>/canvases

Instant Experience aktualisieren

Zum Aktualisieren einer Instant Experience muss ihre Veröffentlichung rückgängig gemacht werden. Außerdem benötigst du die ID der Instant Experience (CANVAS-ID) sowie die IDs aller Elemente, die aktualisiert werden sollen.

use FacebookAds\Api;
use FacebookAds\Http\RequestInterface;

$params = array(
  'background_color' => 'FFFFFF',
  'body_element_ids' => array(<CANVAS_PHOTO_ID>),
  'is_hidden' => false,
  'is_published' => false,
  'name' => 'Canvas Name',
);

$data = Api::instance()->call(
  '/' . <CANVAS_ID>,
  RequestInterface::METHOD_POST,
  $params)->getContent();

curl \
  -F 'background_color=FFFFFF' \
  -F 'body_element_ids=["<CANVAS_PHOTO_ID>"]' \
  -F 'is_hidden=' \
  -F 'is_published=' \
  -F 'name=Canvas Name' \
  -F 'access_token=<ACCESS_TOKEN>' \
  https://graph.facebook.com/v2.11/<CANVAS_ID>

Vorlage verwenden

Mit einer Vorlage kannst du schnell eine Instant Experience für ein bestimmtes Geschäftsziel erstellen. Das Layout für jede Vorlage ist festgelegt. Du kannst aber Standardinhalte durch deine eigenen Bilder, Videos, Produkte, Texte und Links ersetzen.

Elementtypen für eine Vorlage abrufen

Schritt 1: Dokumentinformationen für die Vorlage abrufen

Sende eine GET-Anforderung, um zu bestimmen, welche Elemente für eine bestimmte Vorlage benötigt werden. Im folgenden Beispiel ist das die Vorlage Neue Kunden gewinnen.

curl -i -X GET \
 "https://graph.facebook.com/VERSION/133471657203838?fields=document&access_token=ACCESS-TOKEN"

Beispielantwort

{
  "document": {
    "name": "Get New Customers",
    "id": "397246414010297"
  },
  "id": "133471657203838"
}

Schritt 2: Elementtypen abrufen

Über die ID für das Feld document kannst du konkrete Elemente abrufen, die für eine bestimmte Vorlage verfügbar sind.

curl -i -X GET \
 "https://graph.facebook.com/VERSION/397246414010297?fields=body_elements&access_token=ACCESS-TOKEN"

Die zurückgegebene Liste enthält Elementtypen, die zur Nutzung in der Vorlage Neue Kunden gewinnen verfügbar sind.

    {
  "body_elements": [
    {
      "name": "Cover Image or Video",
      "element_type": "PHOTO",
      "id": "397271930674412"
    },
    {
      "name": "Text",
      "element_type": "RICH_TEXT",
      "id": "397271920674413"
    },
    {
      "name": "Text",
      "element_type": "RICH_TEXT",
      "id": "397271910674414"
    },
    {
      "name": "Button",
      "element_type": "BUTTON",
      "id": "397271914007747"
    },
    {
      "name": "Carousel",
      "element_type": "CAROUSEL",
      "id": "397271940674411"
    },
    {
      "name": "Text",
      "element_type": "RICH_TEXT",
      "id": "397271917341080"
    },
    {
      "name": "Button",
      "element_type": "BUTTON",
      "id": "397271924007746"
    }
  ],
  "id": "397246414010297"
}

Veröffentlichen

Sende zur Veröffentlichung einer Instant Experience-Werbeanzeige eine POST-Anforderung an deine Instant Experience-ID (CANVAS-ID) und setze das Feld is_published auf true.

use FacebookAds\Api;
use FacebookAds\Http\RequestInterface;

$params = array(
  'is_published' => true,
);

$data = Api::instance()->call(
  '/' . <CANVAS_ID>,
  RequestInterface::METHOD_POST,
  $params)->getContent();

curl \
  -F 'is_published=1' \
  -F 'access_token=<ACCESS_TOKEN>' \
  https://graph.facebook.com/v2.11/<CANVAS_ID>

Anzeigengestaltung erstellen

Entwirf eine Anzeige mit dem Link für eine vorhandene Instant Experience (CANVAS-LINK).

curl -X POST \
  -F 'image_hash="<IMAGE_HASH>"' \
  -F 'object_story_spec={
       "page_id": "<PAGE_ID>",
       "link_data": {
         "image_hash": "<IMAGE_HASH>",
         "link": "<CANVAS_LINK>",
         "name": "Creative message",
         "call_to_action": {
           "type": "LEARN_MORE"
         }
       }
     }' \
  -F 'access_token=<ACCESS_TOKEN>' \
  https://graph.facebook.com/v19.0/act_<AD_ACCOUNT_ID>/adcreatives

'use strict';
const bizSdk = require('facebook-nodejs-business-sdk');
const AdAccount = bizSdk.AdAccount;
const AdCreative = bizSdk.AdCreative;

const access_token = '<ACCESS_TOKEN>';
const app_secret = '<APP_SECRET>';
const app_id = '<APP_ID>';
const id = '<AD_ACCOUNT_ID>';
const api = bizSdk.FacebookAdsApi.init(access_token);
const showDebugingInfo = true; // Setting this to true shows more debugging info.
if (showDebugingInfo) {
  api.setDebug(true);
}

const logApiCallResult = (apiCallName, data) => {
  console.log(apiCallName);
  if (showDebugingInfo) {
    console.log('Data:' + JSON.stringify(data));
  }
};

let fields, params;
fields = [
];
params = {
  'image_hash' : '<imageHash>',
  'object_story_spec' : {'page_id':'<pageID>','link_data':{'image_hash':'<imageHash>','link':'<canvasURI>','name':'Creative message','call_to_action':{'type':'LEARN_MORE'}}},
};
const adcreatives = (new AdAccount(id)).createAdCreative(
  fields,
  params
);
logApiCallResult('adcreatives api call complete.', adcreatives);

require __DIR__ . '/vendor/autoload.php';

use FacebookAds\Object\AdAccount;
use FacebookAds\Object\AdCreative;
use FacebookAds\Api;
use FacebookAds\Logger\CurlLogger;

$access_token = '<ACCESS_TOKEN>';
$app_secret = '<APP_SECRET>';
$app_id = '<APP_ID>';
$id = '<AD_ACCOUNT_ID>';

$api = Api::init($app_id, $app_secret, $access_token);
$api->setLogger(new CurlLogger());

$fields = array(
);
$params = array(
  'image_hash' => '<imageHash>',
  'object_story_spec' => array('page_id' => '<pageID>','link_data' => array('image_hash' => '<imageHash>','link' => '<canvasURI>','name' => 'Creative message','call_to_action' => array('type' => 'LEARN_MORE'))),
);
echo json_encode((new AdAccount($id))->createAdCreative(
  $fields,
  $params
)->exportAllData(), JSON_PRETTY_PRINT);

from facebook_business.adobjects.adaccount import AdAccount
from facebook_business.adobjects.adcreative import AdCreative
from facebook_business.api import FacebookAdsApi

access_token = '<ACCESS_TOKEN>'
app_secret = '<APP_SECRET>'
app_id = '<APP_ID>'
id = '<AD_ACCOUNT_ID>'
FacebookAdsApi.init(access_token=access_token)

fields = [
]
params = {
  'image_hash': '<imageHash>',
  'object_story_spec': {'page_id':'<pageID>','link_data':{'image_hash':'<imageHash>','link':'<canvasURI>','name':'Creative message','call_to_action':{'type':'LEARN_MORE'}}},
}
print AdAccount(id).create_ad_creative(
  fields=fields,
  params=params,
)

import com.facebook.ads.sdk.*;
import java.io.File;
import java.util.Arrays;

public class SAMPLE_CODE_EXAMPLE {
  public static void main (String args[]) throws APIException {

    String access_token = \"<ACCESS_TOKEN>\";
    String app_secret = \"<APP_SECRET>\";
    String app_id = \"<APP_ID>\";
    String id = \"<AD_ACCOUNT_ID>\";
    APIContext context = new APIContext(access_token).enableDebug(true);

    new AdAccount(id, context).createAdCreative()
      .setImageHash(\"<imageHash>\")
      .setObjectStorySpec(
          new AdCreativeObjectStorySpec()
            .setFieldLinkData(
              new AdCreativeLinkData()
                .setFieldCallToAction(
                  new AdCreativeLinkDataCallToAction()
                    .setFieldType(AdCreativeLinkDataCallToAction.EnumType.VALUE_LEARN_MORE)
                )
                .setFieldImageHash(\"<imageHash>\")
                .setFieldLink(\"<canvasURI>\")
                .setFieldName(\"Creative message\")
            )
            .setFieldPageId(\"<pageID>\")
        )
      .execute();

  }
}

require 'facebook_ads'

access_token = '<ACCESS_TOKEN>'
app_secret = '<APP_SECRET>'
app_id = '<APP_ID>'
id = '<AD_ACCOUNT_ID>'

FacebookAds.configure do |config|
  config.access_token = access_token
  config.app_secret = app_secret
end

ad_account = FacebookAds::AdAccount.get(id)
adcreatives = ad_account.adcreatives.create({
    image_hash: '<imageHash>',
    object_story_spec: {'page_id':'<pageID>','link_data':{'image_hash':'<imageHash>','link':'<canvasURI>','name':'Creative message','call_to_action':{'type':'LEARN_MORE'}}},
})

Sobald die Anzeigengestaltung abgeschlossen ist, kannst du die Anzeigengruppe und die Anzeigenkampagne erstellen.

Werbeanzeigen-Dialog für Instant Experiences

Du kannst über den Werbeanzeigen-Dialog für Instant Experiences die Facebook-Oberfläche für die Erstellung von Instant Experience-Werbeanzeigen auf deiner Webseite bereitstellen. Ausführliche Informationen zur UI-Komponente findest du unter Dialoge.

Richte das Facebook-SDK für JavaScript ein. Entsprechende Informationen findest du hier:

• Kurzanleitung
• Initialisierungsreferenz

Das JavaScript-SDK basiert auf der Berechtigung des*der angemeldeten Nutzer*in zur Erstellung einer Instant Experience. Falls der*die Nutzer*in nicht über die notwendigen Berechtigungen zur Instant Experience-Erstellung für die bereitgestellte Seite und das Unternehmen verfügt, wird im Dialog ein Fehler angezeigt. Um Fehler zu vermeiden, müssen die Nutzer*innen im Unternehmen sein und über die Berechtigung zur Erstellung von Anzeigen für die Seite verfügen.

Rufe anschließend den folgenden Dialog auf:

FB.ui({         
  display: 'popup',
  method: 'instant_experiences_builder',
  business_id: '<BUSINESS_ID>',
  page_id: '<PAGE_ID>'
}, function(response) {
  // callback
});

Du kannst folgende Einstellungen für das Plugin angeben:

Der Parameter canvas_id ist optional. Er soll einem*einer Nutzer*in die Bearbeitung bzw. die Vorschau einer vorhandenen Instant Experience ermöglichen. Falls eine Instant Experience abgeschlossen ist, kannst du sie nicht mehr bearbeiten. Zum Aufrufen der Vorschau einer Instant Experience wird der Instant Experiences-Dialog empfohlen.

Das Plugin gibt bei Erfolg folgende Antwort zurück:

{
  "success": true,
  "id": "CANVAS-ID"
}

Die zurückgegebene ID ist eine veröffentlichte Instant Experience. Du kannst sie jetzt in Werbekampagnen verwenden. Wenn keine Antwort oder die Antwort undefined zurückgegeben wird, hat der*die Nutzer*in den Dialog vor dem Abschluss der Instant Experience geschlossen. Die Instant Experiences wurden zwar eventuell gespeichert, aber nicht fertiggestellt. Du kannst alle Instant Experiences, die zu einer Seite gehören, mit der Graph API aufrufen und prüfen, ob nicht fertiggestellte Experiences darunter sind.

Vorschau einer Instant Experience ansehen

Iframe Preview API

Du kannst eine Vorschau und eine Instant Experience generieren, indem du die Previews API aufrufst, die einen iframe zurückgibt, ähnlich der Ad Previews API:

curl -X GET \
  -d 'access_token=<ACCESS_TOKEN>' \
  https://graph.facebook.com/v18.0/<CANVAS_ID>/preview

Die API gibt etwa Folgendes zurück. Dies kann angezeigt werden, indem du das zurückgegebene iframe-Element in HTML einbettest:

{
"data": [
    {
      "body": "<iframe src=\"https://www.facebook.com/ads/canvas/preview?d=AQKELApdJxoVp2f3PHl8-pRtYuAh4-_eDupMDbh-pS9zde_EFxckhYQCXu7NYUi4PhhBA7uskIo2Ys3IjIVNGZiS&t=AQKGOPqGI-NWcv1YKbA\" width=\"405\" height=\"720\" scrolling=\"yes\" style=\"border: none;\"></iframe>"
    }
  ],
  "__www_request_id__": "AQnyr47Qp2r5M-ISqSiMgrw"
}

Facebook-SDK

Du kannst über den Dialog „Instant Experiences-Vorschau“ die Vorschau einer Instant Experience bereitstellen, wie sie Facebook-Nutzer*innen auf deiner Webseite angezeigt würde. Ausführliche Informationen zur UI-Komponente findest du unter Dialoge.

Richte das Facebook-SDK für JavaScript ein. Entsprechende Informationen findest du hier:

• Kurzanleitung
• Initialisierungsreferenz

Das JavaScript-SDK basiert auf den Berechtigungen des angemeldeten Nutzers zur Erstellung einer Instant Experience. Falls der*die Nutzer*in nicht über die notwendigen Berechtigungen zur Anzeige der Instant Experience verfügt, wird im Dialog ein Fehler angezeigt.

Rufe daraufhin den Vorschau-Dialog auf:

FB.ui({         
  display: 'popup',
  method: 'instant_experiences_preview',
  canvas_id: 'CANVAS-ID'
});

Du kannst folgende Einstellungen für das Plugin angeben:

Zielgruppen für Instant Experiences erstellen

Lege zur Erstellung einer Interaktionszielgruppe, d. h. einer Gruppe von Personen, die mit einer Instant Experience interagiert haben, den Parameter object_id des Felds rule auf die Instant Experience-ID (CANVAS-ID) in deinem POST /act_AD-ACCOUNT/customaudiences-Aufruf fest.

Personen, die die Instant Experience geöffnet haben

curl \
  -F 'name=Instant Experience Engagement Audience' \
  -F 'description=People who opened this Instant Experience' \
  -F 'rule=[{"object_id":"<CANVAS_ID>","event_name":"instant_shopping_document_open"}]' \
  -F 'access_token=<ACCESS_TOKEN>' \  
https://graph.facebook.com/<VERSION>/act_<AD_ACCOUNT_ID>/customaudiences

Personen, die auf Links in der Instant Experience geklickt haben

curl \
  -F 'name=Instant Experience Engagement Audience' \
  -F 'description=People who clicked any links in this Instant Experience' \
  -F 'rule=[{"object_id":"<CANVAS_ID>","event_name":"instant_shopping_element_click"}]' \
  -F 'access_token=<ACCESS_TOKEN>' \  
https://graph.facebook.com/<VERSION>/act_<AD_ACCOUNT_ID>/customaudiences

Weitere Information zu Custom Audiences erhältst du unter Custom Audience – Referenz.

Instant Experiences und Instagram-Werbeanzeigen

Bei der Implementierung von Instant Experiences mit Instagram werden dieselben API-Aufrufe wie für Instant Experience auf Facebook verwendet. Bei der Verwendung von Instagram und Instant Experiences gelten die folgenden Einschränkungen:

• Platzierungen: Verfügbar für Instagram Feed und Instagram Stories. Wenn du dich für Instagram Stories entscheidest, solltest du diese Option als alleinige Anzeigenplatzierung auswählen.
• Instant Experience-Elemente: Überschriften und Produktpaletten werden vollständig unterstützt.

Wir unterstützen diese Instant Experience-Elemente auf Instagram teilweise:

• Fußzeile: Kein swipe to open in Clients. Dies wird stattdessen als Tap to open angezeigt.
• Carousel: Keine Fotos, die auf eine andere Instant Experience verlinken. Dies erscheint im Client als Link, auf den nicht geklickt werden kann. Für Fotos und Videos gibt es nicht die Optionen „An Höhe anpassen“, „An Breite anpassen“ oder „Vollbildmodus durch Kippen“. Das wird als „An Breite anpassen“ angezeigt.
• Button: Link zu einer anderen Instant Experience oder zum App Store ist nicht möglich.
• Text: Keine RTL-Sprachunterstützung.
• Video: Keine 360°-Videos.
• Filialsuche: Nicht unterstützt.

Werbeanzeigen-Insights

Eine Übersicht und Beschreibungen der verfügbaren Kennzahlen findest du unter Werbeanzeigen-Insights.

Siehe auch

• Leitfaden für Facebook-Werbeanzeigen: Instant Experience-Spezifikationen
• Hilfebereich für Unternehmen: Informationen zu Instant Experiences