インスタントエクスペリエンス

インスタントエクスペリエンスは、フィードの広告をクリックするとほぼ瞬時に読み込まれる全画面の投稿クリック広告です。

APIでcanvasに言及されている箇所は、インスタントエクスペリエンスを指しています。以前このフォーマットは、キャンバスという名前で呼ばれていました。

開始する前に

インスタントエクスペリエンスを作成および管理するには、次のものが必要です。

制限

インスタントエクスペリエンスは、未公開の場合にのみ更新できます。
Instagramでは、インスタントエクスペリエンスAPIは限定的に使用できます。
インスタントエクスペリエンスを使用する広告は、Facebookストーリーズではサポートされていません。

作成する

インスタントエクスペリエンスを作成するには、FacebookページのID (PAGE-ID)と、エクスペリエンスに含めるなんらかの要素(写真、ボタン、テキストなど)が必要です。

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

エレメント

名前	説明
ボタン	インスタントエクスペリエンス内のボタン。`button_style`フィールドは必須です。
カルーセル	インスタントエクスペリエンス用のカルーセル。
フッター	インスタントエクスペリエンス用のフッター。
ヘッダー	インスタントエクスペリエンス用のヘッダー。
写真	インスタントエクスペリエンス内の写真。Facebookページにアップロードされた写真の`PHOTO-ID`を指定してください。
製品リスト	インスタントエクスペリエンス用の製品のリスト。
商品セット	インスタントエクスペリエンスに表示されるAdvantage+ カタログ広告の商品カタログの商品のセット。
販売店情報	インスタントエクスペリエンス内の販売店情報。
テキスト	インスタントエクスペリエンス内に表示されるテキストとそのスタイル。
動画	インスタントエクスペリエンス内の動画。Facebookページにアップロードされた動画の`VIDEO-ID`を指定してください。

要素の削除

要素を削除するには、削除する要素のIDを指定して、DELETEリクエストを送信します。

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>

既存のインスタントエクスペリエンスを取得する

既存のインスタントエクスペリエンスに関する情報を取得するには、インスタントエクスペリエンスのID (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>

ページのインスタントエクスペリエンスをすべて取得する

Facebookページのすべての既存のインスタントエクスペリエンスに関する情報を取得するには、ページのID (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

インスタントエクスペリエンスを更新する

インスタントエクスペリエンスを更新するには、エクスペリエンスが非公開でなければならず、インスタントエクスペリエンスのID (CANVAS-ID)と更新する要素のIDが必要です。

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>

テンプレートを使用する

テンプレートを使用すると、特定のビジネスゴールに適したインスタントエクスペリエンスを簡単に作成できます。各テンプレートのレイアウトは固定されていますが、デフォルトのコンテンツを独自の画像、動画、製品、テキスト、リンクに置き換えることができます。

APIテンプレート名	テンプレートID	説明
新規顧客獲得	`133471657203838`	アクションを促すモバイル向けランディングページでコンバージョンを推進します。広告マネージャの顧客獲得テンプレートをご覧ください。
ビジネス紹介	`1063217037112304`	ブランド、製品、サービスを見つける魅力的な方法をユーザーに提供します。広告マネージャのストーリーテリングテンプレートをご覧ください。
製品販売(カタログなし)	`424787857903852`	カタログを使用せずに製品情報をアップロードして、モバイルショッピングエクスペリエンスを作成します。広告マネージャの製品販売(カタログなし)テンプレートをご覧ください。
製品販売: ライフスタイルレイアウト	`1369752616394017`	写真を活用して、ユーザーが実際の製品を確認できるようにします。広告マネージャのルックブックテンプレートをご覧ください。
製品販売: グリッドレイアウト	`1932289657009030`	製品カタログを使用して、ユーザーがモバイルデバイスから直接購入できるエクスペリエンスを作成します。広告マネージャのストアフロントテンプレートをご覧ください。
ARエクスペリエンス		ARエクスペリエンステンプレートは、広告マネージャでのみ利用できます。

テンプレートの要素タイプを取得する

ステップ1. テンプレートのドキュメント情報を取得する

特定のテンプレート(次の例では新規顧客獲得)に必要な要素を特定するために、GETリクエストを送信します。

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

応答の例

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

ステップ2. 要素タイプを取得する

documentフィールドのIDを使用して、特定のテンプレートで使用できる特定の要素を取得します。

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

返されるリストには、新規顧客獲得テンプレートで使用できる要素タイプが表示されます。

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

公開する

インスタントエクスペリエンス広告を公開するには、is_publishedフィールドをtrueに設定して、POSTリクエストをインスタントエクスペリエンスID (CANVAS-ID)に送信します。

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>

広告クリエイティブを作成する

既存のインスタントエクスペリエンスのリンク(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'}}},
})

広告クリエイティブの準備ができたら、広告グループ、広告セット、広告キャンペーンを作成できます。

インスタントエクスペリエンス広告ダイアログ

インスタントエクスペリエンス広告ダイアログを使用すると、Facebookのインスタントエクスペリエンス広告作成ユーザーインターフェイスをウェブサイトに取り入れることができます。UIコンポーネントについて詳しくは、ダイアログをご覧ください。

JavaScript用Facebook SDKの設定について詳しくは、次のページをご覧ください。

JavaScript SDKによるインスタントエクスペリエンスの作成は、ログインしているユーザーのアクセス許可に依存します。提供されたページとビジネスのインスタントエクスペリエンスを作成するために必要なアクセス許可がユーザーにない場合、ダイアログにエラーが表示されます。エラーが発生しないようにするには、ユーザーがビジネスに参加していること、およびページに対する「広告の作成」アクセス許可を持っていることが必要です。

次に、ダイアログをトリガーします。

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

プラグインには次の設定を指定できます。

名前	必須	説明
`display`	必須	必須のパラメーター。設定値: `popup`
`method`	必須	必須のパラメーター。設定値: `instant_experiences_builder`
`business_id`	必須	ビジネスID
`page_id`	必須	インスタントエクスペリエンスを関連付けるページID
`canvas_id`	任意	編集するインスタントエクスペリエンスのID

パラメーターcanvas_idは任意であり、ユーザーが既存のインスタントエクスペリエンスを編集またはプレビューできるようにするためのものです。インスタントエクスペリエンスが完成すると、編集できなくなります。インスタントエクスペリエンスをプレビューするには、インスタントエクスペリエンスのプレビューダイアログを使用することをおすすめします。

成功すると、プラグインから次の応答が返されます:

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

返されるIDは、公開されたインスタントエクスペリエンスです。これを広告キャンペーンで使用できるようになりました。応答がない場合、またはundefinedという応答が返される場合は、閲覧者がインスタントエクスペリエンスを完了する前にダイアログを閉じたことを意味します。ユーザーはインスタントエクスペリエンスを保存した可能性がありますが、完了していません。グラフAPIを使用してページに属するすべてのインスタントエクスペリエンスを取得し、完了していないエクスペリエンスがあるかどうかを調べることができます。

インスタントエクスペリエンスをプレビューする

IframeプレビューAPI

広告プレビューAPIと同様に、iframeを返すプレビューAPIを呼び出して、インスタントエクスペリエンスのプレビューを生成できます。

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

このAPIは次のようなものを返します。返されたiframe要素を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"
}

Facebook SDK

このダイアログを使用して、Facebookの利用者がウェブサイトで目にするとおりにインスタントエクスペリエンスをプレビューできます。UIコンポーネントについて詳しくは、ダイアログをご覧ください。

JavaScript用Facebook SDKの設定について詳しくは、次のページをご覧ください。

JavaScript SDKによるインスタントエクスペリエンスの作成は、ログインしているユーザーのアクセス許可に依存します。インスタントエクスペリエンスを表示するために必要なアクセス許可がユーザーにない場合、ダイアログにエラーが表示されます。

次に、プレビューダイアログをトリガーします。

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

プラグインには次の設定を指定できます。

名前	必須	説明
`display`	必須	必須のパラメーター。設定値: `popup`
`method`	必須	必須のパラメーター。設定値: `instant_experiences_preview`
`canvas_id`	必須	プレビューするインスタントエクスペリエンスのID

インスタントエクスペリエンスのオーディエンスを作成する

エンゲージメントオーディエンス(インスタントエクスペリエンスにエンゲージした人からなるオーディエンス)を作成するには、POST /act_AD-ACCOUNT/customaudiences呼び出しで、ruleフィールドのobject_idパラメーターをインスタントエクスペリエンスID (CANVAS-ID)に設定します。

インスタントエクスペリエンスを開いた人

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

インスタントエクスペリエンス内のいずれかのリンクをクリックした人

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

カスタムオーディエンスについて詳しくは、カスタムオーディエンスのリファレンスをご覧ください。

インスタントエクスペリエンスとInstagram広告

Instagramでインスタントエクスペリエンスを実装するには、Facebookのインスタントエクスペリエンスで使用するのと同じAPI呼び出しを使用します。Instagramとインスタントエクスペリエンスを使用する場合は、以下の制限があります。

配置 - InstagramフィードとInstagramストーリーズで使用できます。Instagramストーリーズを選択した場合は、これを自分専用の広告の配置として選択してください。
インスタントエクスペリエンス要素 - ヘッダーと製品セットは完全にサポートされています。

Instagramでは、次のインスタントエクスペリエンス要素は部分的にサポートされています。

フッター - swipe to openはサポートされていません。クライアントでは、Tap to openとしてレンダリングされます。
カルーセル - 別のインスタントエクスペリエンスにリンクする写真はサポートされていません。クライアントでは、クリックできないリンクとして表示されます。写真と動画では、[高さに合わせる]、[横幅に合わせる]、[傾けて次を見る]がサポートされていません。横幅に合わせて表示されます。
ボタン - 別のインスタントエクスペリエンスまたはApp Storeにリンクすることはできません。
テキスト - RTL言語はサポートされていません。
動画 - 360度動画はサポートされていません。
販売店情報 - サポートされていません。

広告インサイト

利用可能な指標の概要と説明については、「広告インサイト」をご覧ください。

参考情報

Facebook広告ガイド: インスタントエクスペリエンスの仕様
ビジネスヘルプセンター: インスタントエクスペリエンスについて