Experiencias instantáneas

Las experiencias instantáneas son un destino publicitario posterior al clic en pantalla completa que se carga casi de forma instantánea desde los anuncios de la sección de noticias.

Antes de empezar

Para crear experiencias instantáneas y administrarlas, necesitas lo siguiente:

• El permiso pages_manage_ads
• El permiso pages_read_engagement
• El permiso pages_show_list
• Poder realizar la tarea ADVERTISE en la página

Limitaciones

• Solo puedes actualizar una experiencia instantánea sin publicar.
• La API de experiencias instantáneas está disponible para Instagram de forma limitada.
• Los anuncios con experiencias instantáneas no se admiten en Facebook Stories.

Crear

Para crear una experiencia instantánea, necesitarás el identificador de una página de Facebook (PAGE-ID) y cualquier elemento que quieras incluir en la experiencia, como fotos, botones y texto.

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

Elementos

Eliminar un elemento

Para eliminar un elemento, envía una solicitud DELETE con el identificador del elemento que quieres eliminar.

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>

Obtener una experiencia instantánea existente

Para obtener información acerca de una experiencia instantánea existente, necesitarás el identificador de la experiencia instantánea (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>

Obtener todas las experiencias instantáneas para una página

Para obtener información acerca de todas las experiencias instantáneas existentes de una página de Facebook, necesitarás el identificador de la página (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

Actualizar una experiencia instantánea

Para actualizar una experiencia instantánea, es necesario anular su publicación. Además, necesitarás el identificador de la experiencia instantánea (CANVAS-ID), así como cualquier identificador de elemento que quieras actualizar.

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>

Utilizar una plantilla

Puedes usar una plantilla para crear rápidamente una experiencia instantánea para un objetivo empresarial específico. Aunque el diseño de cada plantilla es fijo, puedes reemplazar el contenido predeterminado con tus propios vídeos, imágenes, productos, textos y enlaces.

Obtener tipos de elementos para una plantilla

Paso 1. Obtener la información del documento para la plantilla

Envía una solicitud GET para determinar qué elementos son necesarios para una plantilla concreta. En el ejemplo siguiente, utilizamos la plantilla Conseguir clientes nuevos.

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

Ejemplo de respuesta

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

Paso 2. Obtener los tipos de elementos

Utiliza el identificador del campo document para obtener elementos específicos disponibles para una plantilla concreta.

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

La lista devuelta muestra los tipos de elementos disponibles que se pueden utilizar en la plantilla Conseguir clientes nuevos.

    {
  "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"
}

Publicar

Para publicar su anuncio de experiencia instantánea, envía una solicitud POST a tu identificador de experiencia instantánea (CANVAS-ID) y establece el campo is_published en 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>

Crear el contenido del anuncio

Crea el contenido del anuncio desde el enlace de una experiencia instantánea existente (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'}}},
})

Cuando el contenido del anuncio esté listo, puedes continuar con la creación del grupo de anuncios, el conjunto de anuncios y la campaña publicitaria.

Cuadro de diálogo Anuncios de experiencias instantáneas

Puedes utilizar el cuadro de diálogo Anuncios de experiencias instantáneas para proporcionar las interfaces de usuario de creación de anuncios de experiencias instantáneas de Facebook en tu sitio web. Para obtener más información sobre el componente de la interfaz de usuario, consulta Cuadros de diálogo.

Si quieres configurar el SDK de Facebook para JavaScript, consulta los siguientes recursos:

• Guía de inicio rápido
• Referencia de inicialización

El SDK para JavaScript depende de los permisos del usuario que ha iniciado la sesión para crear una experiencia instantánea. Si el usuario no tiene los permisos necesarios para crear una experiencia instantánea para la página y la empresa especificadas, el cuadro de diálogo mostrará un error. Para evitar errores, el usuario debe estar en la empresa y tener permisos de creación de anuncios para la página.

A continuación, activa el cuadro de diálogo:

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

Puedes establecer la siguiente configuración para el plugin:

El parámetro canvas_id es opcional y sirve para permitir al usuario editar una experiencia instantánea existente o previsualizarla. Si una experiencia instantánea está completa, no se puede editar. Para obtener una vista previa de una experiencia instantánea, es recomendable utilizar el cuadro de diálogo Vista previa de experiencias instantáneas.

Si la operación se realiza correctamente, el plugin devuelve la siguiente respuesta:

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

El identificador devuelto es una experiencia instantánea publicada. Ahora lo puedes utilizar en las campañas publicitarias. Si no se devuelve ninguna respuesta o se devuelve la respuesta undefined, significa que el usuario ha cerrado el cuadro de diálogo antes de finalizar la experiencia instantánea. Es posible que el usuario haya guardado las experiencias instantáneas, pero que no las haya finalizado. Puedes extraer todas las experiencias instantáneas que pertenecen a una página mediante la API Graph para ver si existe alguna experiencia sin finalizar.

Obtener una vista previa de una experiencia instantánea

API de vistas previas de iframe

Para generar una vista previa de una experiencia instantánea, llama a la API de vistas previas, que devuelve un iframe de forma similar a la API de vistas previas del anuncio:

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

La devolución de la API es similar a la que se muestra a continuación y puedes verla insertando el elemento de iframe devuelto en HTML:

{
"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"
}

SDK de Facebook

Puedes usar este cuadro de diálogo para ofrecer una vista previa de una experiencia instantánea tal como un usuario en Facebook la vería desde tu sitio web. Para obtener detalles sobre el componente de IU, consulta Cuadros de diálogo.

Si quieres configurar el SDK de Facebook para JavaScript, consulta los siguientes recursos:

• Guía de inicio rápido
• Referencia de inicialización

El SDK para JavaScript depende de los permisos del usuario que ha iniciado sesión para crear una experiencia instantánea. Si el usuario no tiene los permisos necesarios para ver la experiencia instantánea, el cuadro de diálogo mostrará un error.

A continuación, activa el cuadro de diálogo de vista previa:

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

Puedes establecer la siguiente configuración para el plugin:

Crear audiencias para las experiencias instantáneas

Para crear una audiencia de interacción, es decir, una audiencia de personas que han interactuado con una experiencia instantánea, establece el parámetro object_id del campo rule en el identificador de la experiencia instantánea (CANVAS-ID) de tu llamada a POST /act_AD-ACCOUNT/customaudiences.

Personas que abrieron la experiencia instantánea

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

Personas que hicieron clic en los enlaces de la experiencia instantánea

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

Para obtener más información sobre las audiencias personalizadas, consulta la referencia de la audiencia personalizada.

Experiencias instantáneas y anuncios de Instagram

La implementación de las experiencias instantáneas con Instagram utiliza las mismas llamadas a la API que se usan para la experiencia instantánea en Facebook. Ten en cuenta que existen limitaciones a la hora de utilizar Instagram y experiencias instantáneas:

• Ubicaciones: disponibles para la sección de noticias de Instagram e Instagram Stories. Si seleccionas Instagram Stories, debes elegir esta opción como ubicación de anuncios exclusiva.
• Elementos de experiencias instantáneas: totalmente compatibles con los encabezados y los conjuntos de productos.

Admitimos parcialmente estos elementos de experiencia instantánea en Instagram:

• Pie de página: no se puede utilizar swipe to open en los clientes que representa como Tap to open.
• Secuencia: no se pueden utilizar fotos con un enlace a otra experiencia instantánea. En el cliente se muestra como un enlace en el que no se puede hacer clic. Para las fotos y los vídeos, no admite las opciones de ajustar a la altura, ajustar al ancho ni inclinar para panorámica. Se muestra como ajustar al ancho.
• Botón: no se puede enlazar con otra experiencia instantánea ni con App Store.
• Texto: no se admite el lenguaje RTL.
• Vídeo: no se admiten los vídeos de 360º.
• Localizadores de tiendas: no se admiten.

Estadísticas de los anuncios

Consulta Insights de anuncios para obtener información general y descripciones de las métricas disponibles.

Más información

• Guía de anuncios de Facebook: Información sobre las experiencias instantáneas
• Servicio de ayuda para empresas: Información sobre las experiencias instantáneas