f:id:vasilyjp:20180927112657j:plain

この記事は2016年3月15日時点の情報です。最新の仕様とは異なるかもしれないので、ご注意ください。

概要

Facebookのモバイルページ向けネイティブアドがオープンβで提供を開始していたようなので、埋め込んでみました。基本的にドキュメントが英語しかなかったので、この記事では、Facebookが提供しているドキュメントの意訳と実際に試してみて得られた知見を合わせて書きます。

Audience Network for Mobile Web - Open Beta

埋め込むまでの手順

Facebook developer登録（登録済みならば省略可）
Facebookアプリ登録（登録済みならば省略可）
placement発行
コードの埋め込み

Facebook developer登録

Web上に多くのドキュメントがあるので、詳しい手順は省略します。

Facebookアプリ登録

こちらも、Web上に多くのドキュメントがあるので、詳しい手順は省略します。

placement発行

f:id:vasilyjp:20160315113900p:plain Facebook developerページにアクセスし、左メニューのAudience Networkを選択します。ページ内のPlacementsタブ内の「Create Ad Placement」ボタンを選択します。

f:id:vasilyjp:20160315113936p:plain 表示されたモーダル内の項目を埋めます。「名前」は自分がわかりやすいものを入力しましょう。「広告を表示するステップ」はどのような手順をとった際に、広告が表示されるかを記述します。場合によっては、この情報を元に、facebookの広告チームが提案を行ってくれるそうです。「表示フォーマット」は、「ネイティブ」を選択します（他の形式として「バナー」がありますが、この記事では省略します）。ステータスはオンを選択します（オフは配信を行わず統計データを見るだけの場合に使います）。最適化はとりあえず、フィルレート最適化を選んだほうが良さそうです。最後に保存するを選択して、placementを発行しましょう。

コードの埋め込み

f:id:vasilyjp:20160315113953p:plain

Placementsタブ下のAcive placementsに先ほど発行したplacementが追加されていると思いますので、そこにある「Get HTML」のボタンを押します。

f:id:vasilyjp:20160315114045p:plain 基本は、ダイレクトを選択します（DFPを利用する場合は、DFPを選択してください）。セレクトボックスのほうは、ネイティブを選択します。表示されたHTMLコードをコピーし、自分のサイトの表示させたい箇所に貼り付けます。

以下のようなコードが表示されます。

    <style>
     #ad_root {
        display: none;
        font-size: 14px;
        height: 250px;
        line-height: 16px;
        position: relative;
        width: 300px;
      }

      .thirdPartyMediaClass {
        height: 157px;
        width: 300px;
      }

      .thirdPartyTitleClass {
        font-weight: 600;
        font-size: 16px;
        margin: 8px 0 4px 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .thirdPartyBodyClass {
        display: -webkit-box;
        height: 32px;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }

      .thirdPartyCallToActionClass {
        color: #326891;
        font-family: sans-serif;
        font-weight: 600;
        margin-top: 8px;
      }
    </style>
    <script>
      window.fbAsyncInit = function() {
        FB.Event.subscribe(
          'ad.loaded',
          function(placementId) {
            console.log('Audience Network ad loaded');
            document.getElementById('ad_root').style.display = 'block';
          }
        );
        FB.Event.subscribe(
          'ad.error',
          function(errorCode, errorMessage, placementId) {
            console.log('Audience Network error (' + errorCode + ') ' + errorMessage);
          }
        );
      };
      (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/xfbml.ad.js#xfbml=1&version=v2.5&appId=999999999999999";
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));
    </script>
    <fb:ad placementid="111111111111111_1111111111111111" format="native" nativeadid="ad_root" testmode="false"></fb:ad>
    <div id="ad_root">
      <a class="fbAdLink">
        <div class="fbAdMedia thirdPartyMediaClass"></div>
        <div class="fbAdTitle thirdPartyTitleClass"></div>
        <div class="fbAdBody thirdPartyBodyClass"></div>
        <div class="fbAdCallToAction thirdPartyCallToActionClass"></div>
      </a>
    </div>

これでとりあえず表示はできたかと思います。もし、表示できない場合には、Facebook developerページで広告を設置したサイトのドメインを許可しているかどうかを確認してください。また、開発環境などで確認をしたい場合には、fb:adタグのtestmode属性の値をtrueにし、Facebook developerページの設定で、Developer以上の権限が付与されたアカウントでFacebookにログインした状態でアクセスしてみてください。 testmodeがtrueの場合には、テストデータしか配信されず、クリックなどの挙動も確認できないため、注意が必要です。

Getting Started with the Audience Network

一つのページに複数のADを埋め込む方法

今回は、コンテンツ中とコンテンツ下の2箇所にアドを設置しましたが、 2箇所に設置する場合にどうするかのドキュメントがなかったので、以下のように実装しました。

placementを表示するADの数だけ発行する
コールバックをplacementIDに応じて処理する

サンプルコード

<script>
  window.fbAsyncInit = function() {
    FB.Event.subscribe(
      'ad.loaded',
      function(placementId) {
        if(placementId == '111111111111111_1111111111111111'){
          document.getElementById('ad_root1').style.display = 'block';
        }
        if(placementId == '222222222222222_2222222222222222'){
          document.getElementById('ad_root2').style.display = 'block';
        }
      }
    );
    FB.Event.subscribe(
      'ad.error',
      function(errorCode, errorMessage, placementId) {
        if(placementId == '111111111111111_1111111111111111'){
          document.getElementById('ad_root1').classList.add('error');
        }
        if(placementId == '222222222222222_2222222222222222'){
          document.getElementById('ad_root2').classList.add('error');
        }
      }
    );
  };
  (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/xfbml.ad.js#xfbml=1&version=v2.5&appId=999999999999999";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
</script>

ネイティブアドのデザイン・コーディング

実際に表示してみるとわかると思いますが、サンプルそのままではレイアウトや文字色などサイトに合っていません。ここからは、ネイティブアドらしく、各サイトに合った形で広告を埋め込むための情報を説明していきます。

Native Ads in Mobile Web

ネイティブアドの構成要素

広告の配信ネットワークから広告が配信されてくる際に、自分のコンテンツに合うように表示する要素を取捨選択することができます。以下に利用可能な要素と簡単な説明を載せておきます。

要素名	クラス名	説明	省略してもよいか
Icon Image	fbAdIcon	正方形（128x128）のアイコン。広告主のアイコン（企業ロゴ）などが表示されます	省略可
Ad Image	fbAdMedia	長方形（600x314と書かれていますが、実際は796x415などのサイズ）の広告のメインビジュアル	省略可
Title	fbAdTitle	広告のタイトル	省略不可
Subtitle	fbAdSubtitle	広告のサブタイトル	省略可
Body	fbAdBody	広告の本文	省略可
Call-to-action	fbAdCallToAction	いわゆるCTA。「ゲームであそぶ」「詳しくはこちら」などのクリックを誘う文言が入ります	省略不可
Ad Link	fbAdLink	広告へのリンク。広告のクリック領域を決めるに使います	省略可
Social Context	fbAdSocialContext	アプリの評価や追加情報（200万ダウンロード）などを表示できるらしいです（今回は未使用）	省略可

Native Mobile Web Components

デザインガイドライン

コンテンツに合うようにデザインを調整できるネイティブアドですが、 facebookが規定する最低限のガイドラインを守る必要があります。

Design Guidelines for Audience Network Ads

最低限表示する必要のある要素に関するガイドライン

次の3つの要素を表示する必要があります。表示しなかった場合には、Facebook側から広告の配信が停止されてしまいます。

広告のタイトル
CTA
AdChoicesと広告だと見分けがつく要素（例：SponseredやAdといった表記）

また、それぞれの要素は表示の上でいくつか規定があります。

広告のタイトル

広告のタイトルは少なくとも20文字までは表示する必要があります。タイトルが20文字より多い場合には、ellipsisなどを使って省略することが可能です。

CTA

CTAの文言は省略してはいけませんが、最大でも25文字なので、とても長くなることはありません。また、配信される広告を見たところ、10文字以内が多そうです（25文字の場合を考慮したデザインにしたほうがよいと思います）。

CTAはテキストのまま表示してもよいですが、ボタンのようにデザインすることも許されています。自分のコンテンツとの親和性やクリック率を考えて、使い分けるとよいと思います。

AdChoicesと広告だと見分けがつく要素

まず、広告とコンテンツの台（背景やカードを指す？）とを明確に線引きし、誤ってクリックすることを避けるためにコンテンツとの間にスペース空ける必要があります。この辺の感覚は、ガイドラインに載っている例を参照したほうがよいかと思います。

ユーザが表示される広告について選ぶためにAdChoiceは必須になっています。 AdChoiceについては次の3つの方法の内どれか一つを行う必要があります。（元々、アプリ向けのガイドラインなので、正しいかどうかは怪しいです）

Audience Network SDKによって提供されるAdChoiceの制御機構を用いて、クリック可能な「AdChices」というテキストを表示する
コンテンツと区別するために明確に「Sponsored」「Promoted」「Ad」といった文言を表示し、かつ、広げて表示可能なAdChoices iconを表示する
もし、1.と2.のどちらもできない場合には、「Sponsored」「Promoted」「Ad」といった文言を表示し、app storeページとプライバシーポリシーで閲覧可能なリンクとして https://m.facebook.com/ads/ad_choices へのリンクを設置する

実際に、モバイルページに広告を読み込むと自動でAdChoices icon（緑色の三角のようなアイコン）が読み込まれます。それをタップすると広がって、AdChoicesのテキストが表示されますので、モバイルページのネイティブアドでは、これを用いて2.の要件を満たすのがよさそうです。（AdChoice iconの動作については、ドキュメントに書かれていない仕様なので、突然変わるかもしれません）

その他の構成要素に関するガイドライン

メインビジュアル

メインビジュアルは拡大縮小や切り抜きを行ってもよいですが、描き変えたり歪めてはいけません。最小限の文字と画像はメインビジュアルの下部20-25%の上に重ねて表示できますが、メインビジュアルの上に表示されるテキストは読みやすくする必要があります。

本文

本文の表示は必須ではありませんが、表示する場合には少なくとも72文字は表示する必要があります。 72文字表示できない場合は、非表示にするか、アニメーションで全体を表示するほうがよいです。

実際に導入したデザイン

今回は次のようなデザインを採用しました。実際の広告画面を表示するのは問題がありそうなので、あくまでイメージですが、参考にしてみてください。

f:id:vasilyjp:20160315114116p:plain

まとめ

今回はFacebookのネイティブアドをとりえあず導入してみました。導入したばかりなので、収益という観点でのパフォーマンスはまだわかりませんが、融通の効くデザインガイドラインである点やドキュメントがしっかりしている点で好印象でした。モバイルページ版はまだオープンβということもあり、情報が部分的ではあるので、間違っている箇所もあるかもしれませんが、参考になれば幸いです。

VASILYでは、新しい技術に積極的に取り組めるようなメンバーを募集しています。興味のある方はこちらからご応募ください。

ZOZO TECH BLOG

TECH BLOG

Facebook ネイティブアドのスマホサイトへの導入方法

概要