概要
最新情報については https://docs.piano.io/audience-facebook-integration/ をご覧ください。
Piano Audience の Facebook連携で以下の機能が利用可能となります。
-
Facebook ユーザーID と Piano ユーザーIDの連携(オーディエンス作成、広告キャンペーン、ターゲティングなどに使用)
-
Facebookの「いいね!」をPiano オーディエンスに保存し、収集データに基づくセグメント作成
Facebook上で Pianoのセグメントを利用するには、以下の対応が必要になります。
-
Facebook ピクセルをインストールし、ウェブサイトにID連携コードを設置してカスタムオーディエンスへのユーザー登録を可能にします。Facebookのピクセル設定手順 を参照してください。ユーザーID連携の詳細はこちら。
こちらの対応は非常に重要です。Piano Audience のメニュー「他サービスとの接続」内のFacebook との接続はクライアントサイド接続であるため、Piano Audience はセグメントのメンバーシップを直接Facebookには送信せず、セグメント名とセグメントIDのみを連携し、Facebookのカスタムオーディエンス作成に使用されます。メンバーシップの蓄積はユーザーがページに設置した Facebook ピクセルを発火することで行われます。 -
Facebook Business Manager アカウントで カスタム オーディエンスを作成します。Piano Audienceの「他サービスとの接続」から Facebookとのクライアント接続を通じて、手動または自動作成も可能です。詳細は以下を参照してください。
Piano Audience で Facebook の「いいね!」を保存するには、本記事の「いいね!」セクション に記載されているコード例を使用してください。
カスタムオーディエンスの手動作成
前提
-
Facebook ピクセル を作成し、有効化されていることを確認してください。
Facebookピクセルは、ウェブサイトに設置するコードです。このコードがデータを収集し、Facebook広告からのコンバージョンのトラッキング、広告の最適化、将来の広告向けターゲットオーディエンスの構築、ウェブサイトで何らかのアクションを起こしたユーザーへのリマーケティングを支援します。 -
サイトに Facebook ピクセルを設置してください。
ピクセルの設置が完了したら、次のステップであるカスタム オーディエンスの設定に進みます。以下のコード内の「123456789」は、貴社のピクセルIDに置き換えてください。
<!-- Facebook Pixel Code --> <script> !function (f, b, e, v, n, t, s) { if (f.fbq) return; n = f.fbq = function () { n.callMethod ? n.callMethod.apply(n, arguments) : n.queue.push(arguments) }; if (!f._fbq) f._fbq = n; n.push = n; n.loaded = !0; n.version = '2.0'; n.queue = []; t = b.createElement(e); t.async = !0; t.src = v; s = b.getElementsByTagName(e)[0]; s.parentNode.insertBefore(t, s) }(window, document, 'script', 'https://connect.facebook.net/en_US/fbevents.js'); fbq('init', '123456789'); //<span style="font-weight: 400;"> "123456789" should be replaced with the customer Pixel ID.</span> fbq('track', 'PageView'); </script> <noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=123456789&ev=PageView&noscript=1" /></noscript> <!-- End Facebook Pixel Code -->
Facebookでの カスタムオーディエンスの設定
カスタムオーディエンスを作成および管理するには、Facebookのオーディエンス ツール を使用する必要があります。Meta Business Suite内の以下メニューから「オーディエンス」を選択してください:
オーディエンス ページでは、保存済みのFacebookオーディエンスをすべて確認できるほか、新しいオーディエンスを作成できます。
「オーディエンスを作成」のドロップダウンをクリックし、「カスタム オーディエンス」を選択すると、オーディエンスの作成を開始できます。
Facebookには主に3種類のオーディエンスがあり、それぞれがFacebookキャンペーンのターゲット オーディエンス作成に追加オプションを提供しています。
-
保存済みオーディエンス
-
カスタムオーディエンス
-
類似オーディエンス
Piano Audience セグメントを利用するには、カスタムオーディエンス を選択してください。
過去のウェブサイト訪問者や、コンテンツやアプリと関わりを持ったユーザーをリターゲティングできるので、Facebook カスタム オーディエンスは、おそらく最も価値の高いターゲット層だと考えられます。
ウェブサイトのトラフィックベースのFacebook オーディエンスを利用すれば、自社ウェブサイトと関わりを持ったユーザー向けにリマーケティングキャンペーンを作成できます。広告を閲覧するユーザーは既に一定の関心を示しているため、これらは価値の高いオーディエンスと言えます。
上のように 「Website」を選択したら、次に進み、
「ソース」で貴社にて設定したピクセルを選択してください。上のように緑のチェックマークのアイコンが出ている場合、これが有効化されたピクセルであることを示します。
「イベント」のドロップダウンリストのメニューを開きます。
オプションには以下が含まれます:
-
すべてのウェブサイト訪問者:ウェブサイトを訪問したすべての人。
-
特定のウェブページを訪問した人:URL に基づいてフィルタリングが可能で、特定のキーワードを含む/含まない、または URL 全体を含む/含まない設定ができます。
-
滞在時間別の訪問者:サイト滞在時間に基づいて上位 5%、10%、または 25% のウェブサイト訪問者を選択します。
-
イベントから:オーディエンス作成の元となるピクセルイベントを選択します。例:購入イベントを使用して最近の顧客リストを作成。ピクセルイベントを設定していない場合、このオプションは利用できない可能性があります。
「From your events」オプションを選択してください。選択する項目は、Piano Audienceのメニュー「他サービスとの接続」内のFacebook接続設定にある「ターゲティングキー名」パラメータの値と一致させる必要があります。デフォルト値はCxSegmentsです。
Piano Audienceのメニュー「他サービスとの接続」内のFacebook接続設定 > 接続情報設定:
「From your events」オプションの管理:
-
CxSegments オプションを選択
-
URL/パラメータ → 含む → セグメント ID を設定し、値に Piano Audience のセグメント ID を指定
カスタムオーディエンスに名前を付け(セグメント名を使用)、「オーディエンスを作成」ボタンをクリックします。
これで設定は完了で、カスタム オーディエンスを利用できるようになります。
カスタムオーディエンスの自動作成
Piano AudienceとFacebookの連携により、Facebook APIを介して Piano Audience から セグメント名 と セグメントID を Facebook側にプッシュし、Facebook上でカスタムオーディエンスを自動的に(スケジュールに従って)作成できます。セグメント数が多く手動管理を避けたい場合に有効です。
前提
-
Facebookピクセル を作成し、有効化されていることを確認してください。
-
FacebookピクセルとユーザーID連携コード を貴社サイトに追加します。
アクセストークンは、ユーザー、アプリ、ページを識別する不透明トークンであり、Facebookアプリが Facebook GraphAPI 呼び出しを行う際に使用できます。Facebookログインでアプリに接続し、権限リクエストを承認すると、アプリはFacebook APIへ一時的に安全にアクセスできるアクセストークンを取得します。
Facebookでは、ユーザーアクセストークンには短期トークンと長期トークンの2種類があります。短期トークンの有効期間は通常1~2時間程度、長期トークンは約60日間有効とされています。が、Facebook側でこれを予期なく変更する、早期に失効する可能性があるため、常にこの期間が担保されているわけではありませんのでご注意ください。
デフォルトのユーザートークンとページアクセストークンは短期の数時間で失効しますが、短期トークンを長期トークンに変換できます。
このトークンは、アプリ利用者がFacebookサーバーにリクエストを行うたびに1日1回更新されます。リクエストが行われない場合、トークンは約60日後に期限切れとなり、ユーザーは新しいトークンを取得するために再度ログインフローを経る必要があります。
長期トークン生成の概要は後述の 長期トークン をご参照ください。
Facebookピクセルの設置と長期トークンの生成が完了したら、次のステップに進むことができます。
Facebookへのセグメント送信とAudienceの設定
Piano Audience のメニューから 他サービスとの接続 > 設定 をクリックし、Facebookのアイコンにマウスオーバーした際の下部に表示されている「設定」ボタンをクリックします。
接続の設定
新規接続 メニューから以下の設定が必要です(画面は)。
-
プロジェクト名 : Piano Audience内でのみ表示される(他サービスとの接続 > 接続 上で表示)、連携設定の区別するための任意名称です。
-
アカウントID : Facebook広告アカウントのID
-
ピクセルID : FacebookピクセルのID
-
長期アクセストークン : Facebookとのセグメント連携 | 長期トークン
-
ターゲティングキー名 : イベントソースを管理するパラメータ。Facebookのオーディエンスにユーザーを追加する際に使用されます。このパラメータは英数字のみをサポートします。デフォルト値は
CxSegmentsです。
これらパラメータの設定が完了したら、接続テスト をクリックします。
接続テストが成功すると、ウィンドウ右上の「作成」ボタンが有効になります。設定を続行する前に「作成」をクリックしてこれまでの設定を保存してください。作成すると、ボタンは「保存」に切り替わり、以降は接続設定の変更を保存できるようになります。また接続テストに問題が発生した場合はメッセージが表示されます。解決方法がわからない場合、サポートまでお問い合わせください。
セグメントの設定
テスト接続が成功すると、セグメントの選択 が有効になります。ここで必要に応じたセグメントを選択します。
-
全てのターゲティング用セグメント とは、セグメント作成時に「用途」を「ターゲティング」として設定してある、すべてのアクティブなセグメントがFacebookに送信されることを意味します。この設定後に新しく作成された「ターゲティング」セグメントは自動的に送信対象に追加されます。
-
全てのセグメント とは、セグメント作成時に「用途」を「ターゲティング」と「レポート用」のどちらの設定も送信対象となります。
-
特定のセグメント とはアクティブなセグメントの中から一部のセグメントだけを送信したい場合に使用します。使用したいセグメントが無効(「レポート専用」の設定)となっていた場合、そのセグメントの設定で「用途」を「ターゲティング」に変えて保存後に、再度確認すると選択可能なセグメントになります。セグメント欄の右側にある + をクリックすることで、複数のセグメントを選択して追加することも可能です。
特定のセグメント のオプションでは連携対象とするセグメントをどのように選択するかの設定が可能です。
-
個別にセグメントを選択 は手動でセグメントを検索・選択します。
-
ユーザー ラベル はセグメント作成時に設定したラベル(キーと値のペア)でセグメントを検索・選択し、それに合致するセグメントが連携対象となります。
-
ユーザー セグメントグループ はセグメント作成時に設定したセグメントグループを検索・選択し、それに合致するセグメントが連携対象となります。
セグメントのエクスポート
セグメントの選択 にて エクスポート実行 をクリックすると、次の定期的なセグメント連携を待たずに、即時にセグメントがFacebook側に送信されます。
ここですぐに送信しない場合、もう一つのエクスポート方法は、下の 有効化 のメニュー内で定期的なセグメントの連携を設定することです。ここでは、接続をオンにして毎日のデータ転送を設定するか、作成した設定をまだ有効化はせずに設定のみ保持するかの選択ができます。準備ができたら、ページの右上隅にある「作成」または(編集中の場合は)「保存」をクリックしてください。
またここでいう「定期的なセグメント連携」については1日1回、自動でFacebook側との連携が行われることを意味しますが、その実行が行われる時間に関しては不定となっており、どの時間に連携するかの設定は行うことができません。
この接続はクライアントサイド接続です。つまり、Audience は セグメント メンバーシップ(ユーザーリスト)を送信せず、セグメント名とセグメントIDのみが連携に使用され、Facebookでのカスタムオーディエンス作成に利用可能となります。
モニタリングと更新
他サービスとの接続、にて、いつ連携実行が行われたかを確認可能です。連携設定を更新したい場合はプロジェクト名 箇所のリンクをクリックすることで設定を変更可能です。
連携時にエラーが発生した場合、こちらにエラーの旨が表示されます。さらに詳細なエラーを確認したい場合は、設定画面に 履歴 や エラー タブに出力されていることもあるため、必要に応じてそちらをご確認ください。それら内容をご覧いただいても原因が不明な場合はサポートまでお問い合わせください。
ユーザー連携
-
現在のサイトにアクセスしているユーザーのFacebookユーザーIDを取得するには、そのユーザーが現在のページでFacebookにログインしている必要があります。これは一度だけ行えば十分です(詳細は こちら をご参照ください)。
-
Facebook IDを紐付けるプレフィックス(Facebook ID用のIDをAuience側で保持するための3文字プリフィックス)を作成します。詳細は こちら。
-
/profile/user/external/link/updateに対して persisted クエリを作成します。ここで「type」に2で作成したプレフィックスに固定し、「id」と「cxid」をmutable(変更可能)にします。 -
(オプション)Facebook IDをワンウェイ ハッシュ化することで、PianoユーザーIDからFacebookユーザーを後から特定する可能性を排除できます。
-
以下のタグをページの任意の場所に追加してください(ユーザーが他のページに移動する前に確実に読み込まれるよう、ロードされるファイルの早い段階で動作するような位置に追加することを推奨します)。
<<!-- Cx FB user linking script begin --> <script type="text/javascript"> window.cX = window.cX || {}; cX.callQueue = cX.callQueue || []; cX.callQueue.push(['invoke', function() { function checkFBLogin() { if (window.FB && typeof FB.getLoginStatus === 'function') { FB.getLoginStatus(function(response) { if (response.status === 'connected') { // Read the FaceBook user ID var fbUserId = response.authResponse.userID; // Map the Facebook user ID to the Cxense user ID var persistedQueryId = '<PERSISTED-QUERY-ID>'; // <-- TODO: Insert persisted query id here var apiUrl = 'https://api.cxense.com/profile/user/external/link/update?callback={{callback}}' + '&persisted=' + encodeURIComponent(persistedQueryId) + '&json=' + encodeURIComponent(cX.JSON.stringify({ id: fbUserId, cxid: cX.getUserId() })); cX.jsonpRequest(apiUrl, function (data) { /* If wanted, verify success here*/ }); } else { setTimeout(checkFBLogin, 1000); } }); } else { setTimeout(checkFBLogin, 1000); } } checkFBLogin(); }]); // Async load cx.js (function(d,s,e,t){e=d.createElement(s);e.type='text/java'+s;e.async='async'; e.src='http'+('https:'===location.protocol?'s://s':'://')+'cdn.cxense.com/cx.js'; t=d.getElementsByTagName(s)[0];t.parentNode.insertBefore(e,t);})(document,'script'); </script> <!-- Cx FB user linking script end -->
Piano Audience セグメントを用いた Facebook広告キャンペーン
Piano Audience の 他サービスとの接続 の Facebook連携は Piano Audience のセグメントを用いて、Facebook上でのオーディエンス ターゲティングに利用できます。
Facebook上のキャンペーンは広告管理ツールで作成できます。Meta Business Suite に移動し、左上のメニューから All tools > Ads Manager を選択してください。
このページでは、マーケティング キャンペーンを作成できます。作成ボタンを押して作成を開始してください:
以前に作成したカスタムオーディエンスをキャンペーンのオーディエンスとして使用します:
キャンペーン作成の詳細については、Facebookヘルプポータル をご覧ください。
Piano Audience に作成したセグメントが反映され、ユーザーとマッチするようになるまでに最大数秒の遅延が発生するため、作成直後のセグメントを連携対象に割り当て、Facebook側に送ってもその遅延影響ですぐに反映されない可能性があります。
作成、連携しようとしたセグメントがリアルタイム セグメント(セグメントの対象期間が直近30日以内のセグメント)ではない場合、セグメントにユーザーが割り当てられるようになるまで数時間の遅延が発生します。そのため、特にテストで動作を試されたいような場合にはそのタイムラグを見越した上で、Facebookピクセルタグが設置されたページに再訪問し、Facebookへイベントを送信する必要があります。
-
Facebookビジネスマネージャーでピクセルを作成し、サイト内の
<head>タグ内にピクセルコードを追加してください。 -
/profile/user/segment 用の persistedクエリを作成(詳細)します。
-
以下のコードをウェブページの
<body>タグ内に追加してください(できるだけ下部に配置してください):<script> cX.callQueue.push([ "invoke", function invoke() { cX.getUserSegmentIds({ persistedQueryId: "作成した persistedクエリのID", callback: function callback(segmentIds) { if (document.readyState === "complete") { fbq("trackCustom", "CxSegments", { segmentIds: segmentIds }); } else { var earlyOnReadyStateChange = document.onreadystatechange; document.onreadystatechange = function onReadyStateChange() { if (earlyOnReadyStateChange) { earlyOnReadyStateChange(); } if (document.readyState === "complete") { fbq("trackCustom", "CxSegments", { segmentIds: segmentIds }); } }; } } }); } ]); </script>
-
Facebook Business Manager でカスタムイベントからカスタムオーディエンスを作成します。Facebook側の イベント (fbq)として「CxSegments」を選択します。
パラメーターとして「segmentIds」を追加し、Piano AudienceのセグメントIDを入力します。演算子は必ず「contains」を選択してください。
対象とするオーディエンスは、ターゲティングに使用できる十分な規模である必要があります(トラブルシューティング を参照)。
Piano Adience から Facebookへセグメントを自動的にプッシュする方法は こちら、カスタムオーディエンスを手動で作成する方法については こちら でご確認いただけます。
長期トークン
長期トークンを取得する方法は少なくとも2つあります:
-
システムユーザーアカウントの使用(詳細は後述、Pianoでは他の方法よりもこのオプションの使用を推奨)
-
Facebook API の使用
Facebookでは、従来 All tools → Business Settings にあった設定項目が、現在はMeta Business SuiteまたはBusiness Manager からアクセス可能です。ただしFacebookは全機能を Meta Business Suite へ段階的に移行中であるため、インターフェースによって設定項目の位置が異なる場合があります。
-
Business Settings にアクセスするには、https://business.facebook.com/settings
-
Meta Business Suite 経由で設定にアクセスするには、https://business.facebook.com
トークンを生成するには、システムユーザーアカウントを作成し設定する必要があります。Meta Business Suite で作業し、Business Portfolio を選択後、 Users → System users に移動してください。
システムユーザーを作成するには、Add ボタンを押してください。
名前を入力し、システムユーザーを作成してください。システムユーザー名は自由に命名できます。
新規で作成したユーザーで Assigned assets を選択してください。
Assign assets メニューで Pixel、App、Ad account を設定します。各パラメータについて、トグルをクリックして pixel / app / ad account management を有効にします。設定が完了したら、変更を保存してシステムユーザー詳細画面に戻ります。
Generate token ボタンをクリックして、トークンを生成します。
Select app のドロップダウンメニュー で、事前に追加済みの app を選択してください。
Set expiration で、 Never を選択します。
Assign permissions で、少なくとも2つの必須権限が選択されていることを確認し、トークンを生成します。
必須権限: ads_read、ads_management
Generate token をクリック。
Generate token ウィンドウで、access token をコピーします。これは Piano Audience の接続設定の 長期アクセストークン で使用します。準備ができたら「OK」をクリックします。
いいね
Facebookの「いいね!」ボタンのクリックから発生するイベントを捕捉するには、イベントハンドラーを追加する必要があります。
イベントハンドラーは、cX.sendEvent(..)ヘルパー関数 を使用して、そのイベントをDMPイベント(パフォーマンス イベント)として Piano Audience に送信します。
Piano Audience に Facebook のその他のデータ(性別、年齢、いいね!したURL、友達リストなど)を取得したい場合は、そのデータの読み取り方法について、Facebook開発者ページ を参照してください。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script type="text/javascript" src="http://cdn.cxense.com/cx.js"></script>
<script type="text/javascript">
// The normal pageView event:
cX.setSiteId('1234'); // <-- TODO: Insert your siteId here!
cX.sendPageViewEvent();
</script>
<div>
<img src="http://i.stack.imgur.com/aWl0G.png">
</div>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '123456789', // TODO: Insert your app id here!
xfbml : true,
version : 'v2.3'
});
FB.Event.subscribe('edge.create', function(href, widget) {
cX.setEventAttributes({ origin: 'xyz-website', persistedQueryId: '1234' }); // TODO: Insert your origin and persisted query id here!
cX.sendEvent('Social', { action: 'liked_facebook' });
});
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-like" data-href="http://www.cxense.com" data-layout="button" data-action="like" data-show-faces="true" data-share="true"></div>
</body>
</html>
トラブルシューティング
広告が配信されない
-
広告の配信対象となる オーディエンス の サイズが配信に必要な数を満たしているかどうかを確認してください。Facebook の Audience に移動し、Availability の列が Ready となっていると、そのオーディエンスは広告配信に利用可能な状態にあります。
「オーディエンスが小さすぎます」というようなエラーが表示されている場合、Facebookのユニークユーザーが20人に達するまでお待ちください(FB CxSegmentsイベント送信時点で、ユーザーがFacebookにログインしていることが必須)。オーディエンスに関する詳細は こちら をご覧ください。
-
Facebookヘルプ を確認してください。一般的に考えられる原因として、キャンペーン開始からの時間が短すぎる可能性があります(広告配信システムが広告のパフォーマンスレベルを調整するには24時間かかります)。
-
作成した Persistedクエリ について、identities フィールドが mutable になっているかどうかを確認してください。
-
ブラウザの開発ツールでデバッグを行ってください。
a) ブラウザのコンソールでcX.getUserSegmentIds({ persistedQueryId:''})を実行し、期待する全セグメントIDが取得されているることを確認してください。
b) Facebookで Analytics > Activity > Event debugging に移動し、CxSegments イベントが Facebook側でトラッキングされていることを確認してください。トラッキングされていない場合は Facebook ピクセルの実装の問題と思われるため、その観点で原因調査と特定、対処をお願い致します。
-
上述に問題がなく、動作しない場合はサポートまでお問い合わせください。