Audience Network in Instant Articles

In addition to serving ads that have been sold directly by your team, you can also incorporate ads from Audience Network into your Instant Articles. Learn more about how Audience Network can help monetize your Instant Articles.

Display Ads

Sign Up for Audience Network

To get started, access the Audience Network tool through the Instant Articles configuration located under the Publishing Tools section of your Facebook Page. Even if you already use Audience Network, you will need to create a new Audience Network app dedicated for use within Instant Articles. If you have enabled multiple pages for Instant Articles, you will need a separate app for each page.

Note: You will need to register as a developer to create an app, and you will need to be an admin of the app in order to integrate Instant Articles.

Enabling Audience Network Ads

Once you are connected to Audience Network, create a placement in the Audience Network UI. To generate Placement IDs and integrate Audience Network ads within your Instant Articles, reference the Audience Network documentation. Once you are set up, don’t forget to input your payment information.

To embed Audience Network ad tags in your article, use the op-ad class. These ads are served within a webview when they scroll into the reader’s view.

In the following example, you would simply replace PLACEMENT_ID with the placement ID you generated from the Audience Network dashboard.

Audience Network Ad tag Sample

<figure class="op-ad">
  <iframe width="300" height="250" style="border:0; margin:0;" src="https://www.facebook.com/adnw_request?placement=PLACEMENT_ID&adtype=banner300x250"></iframe>
</figure>

Auto Placing Audience Network Ads

Auto placing your ads maximizes the amount of ads displayed per article. There are two steps to enable this feature with Audience Network ads:

  1. Include the following <meta> element in your articles <head> section:
    <meta property="fb:use_automatic_ad_placement" content="enable=true ad_density=default">
    
    You can change the ad density to control the UX, here are the three options currently available:
    • default (250 word gap which offers high ad density)
    • medium (350 word gap which offers medium ad density)
    • low (500 word gap which offers low ad density)
  2. Place your Audience Network tag with the new placement id into the <header> element of your article. This will place the same ad tag into each slot available for each article (aggregated Audience Network reporting on one placement id).

Auto Placing multiple audience network ads

You may want to see performance by ad slot for reporting purposes. To do this, you can leverage the multi ads template. The template allows you to specify different placement ids for each tag by using a <section> element with the op-ad-template class.

For example, if most of your articles have three ad slots, you may use the following:

<section class="op-ad-template">
  <!-- Audience Network tag for slot #1 -->
    <figure class="op-ad">
       <iframe width="300" height="250" style="border:0; margin:0;" src="https://www.facebook.com/adnw_request?placement=PLACEMENT_ID_1&adtype=banner300x250"></iframe>
    </figure>
  <!-- Audience Network tag for slot #2 -->
    <figure class="op-ad">
       <iframe width="300" height="250" style="border:0; margin:0;" src="https://www.facebook.com/adnw_request?placement=PLACEMENT_ID_2&adtype=banner300x250"></iframe>
    </figure>
  <!-- Audience Network tag for slot #3 -->
    <figure class="op-ad">
       <iframe width="300" height="250" style="border:0; margin:0;" src="https://www.facebook.com/adnw_request?placement=PLACEMENT_ID_3&adtype=banner300x250"></iframe>
    </figure>
  <!-- Default Audience Network tag - will fill all slots below slot #3 -->
    <figure class="op-ad op-ad-default">
       <iframe width="300" height="250" style="border:0; margin:0;" src="https://www.facebook.com/adnw_request?placement=PLACEMENT_ID_4&adtype=banner300x250"></iframe>
    </figure>
</section>

NOTE: The fourth tag in this example is utilizing the op-ad-default class which specifies which tag to use if the article has more than 3 slots available. You can choose to omit this class and tag. In that case our system would use the tag for slot #3 for any extra slots available in the article.

Audience network Recirculation Ads

You can also place Audience Network within the recirculation units at the bottom of your Instant Article. Simply create a new placement id within your Audience Network account and add the following <meta> element to your articles:

<meta property="fb:op-recirculation-ads" content="placement_id="PLACEMENT_ID">

Full Markup Example for Audience network Display Ads Integration (auto ads/multi ads template/recirc ads)

<!doctype html>
<html lang="en" prefix="op: http://media.facebook.com/op#">
  <head>
   <meta charset="utf-8">
   
   <!-- Step #1 - Enable Automatic Ad Placement --> 
   <meta property="fb:use_automatic_ad_placement" content="enable=true ad_density=default">

   <!-- Step #2 - Enable Audience Network Recirc Ad --> 
   <meta property="fb:op-recirculation-ads" content="placement_id=YOUR-PLACEMENT-ID">

   <link rel="canonical" href="http://home.fburl.com/test.html">
   <title>Audience Network Sample Article</title>
  </head>
  <body>
     <article>
       <header>

   <!-- Step #3 - Multiple Audience Network tags --> 
         <section class="op-ad-template">
           <!-- Audience Network tag for slot #1 -->
           <figure class="op-ad">
             <iframe width="300" height="250" style="border:0; margin:0;" src="https://www.facebook.com/adnw_request?placement=PLACEMENT_ID_1&adtype=banner300x250"></iframe>
           </figure>
           <!-- Audience Network tag for slot #2 -->
           <figure class="op-ad">
             <iframe width="300" height="250" style="border:0; margin:0;" src="https://www.facebook.com/adnw_request?placement=PLACEMENT_ID_2&adtype=banner300x250"></iframe>
           </figure>
           <!-- Audience Network tag for slot #3 -->
           <figure class="op-ad">
             <iframe width="300" height="250" style="border:0; margin:0;" src="https://www.facebook.com/adnw_request?placement=PLACEMENT_ID_3&adtype=banner300x250"></iframe>
           </figure>
           <!-- Default Audience Network tag - will fill all slots over #3 -->
           <figure class="op-ad op-ad-default">
             <iframe width="300" height="250" style="border:0; margin:0;" src="https://www.facebook.com/adnw_request?placement=PLACEMENT_ID_4&adtype=banner300x250"></iframe>
           </figure>
         </section>
       </header>

       <!-- Article Body here -->
       
     </article> 
  </body>
</html>    

In-stream Video Ads

NOTE: This functionality is only available to approved publishers. If you would like to monetize your Instant Articles with Audience Network In-stream Video Ads, please review the Requirements section below. If your site meets this criteria, please follow the instructions in the Apply for Audience Network In-stream Video section below.

Requirements for instant articles

  • VPAID. Web players must support VPAID. The page URL must be retrievable by Audience Network's VPAID and must be the same as the page URL in the request.
  • Skip. For any creatives with a length of 31 seconds or longer, Audience Network will allow a user to skip the ad after 10 seconds. Publishers are not permitted to change when a user can skip an ad, or add any additional skipping functionality.
  • Ad position. Ads must be pre-roll or mid-roll, with video content after the ad. Post-roll ads are not eligible.
  • Click-to-play video only.
  • Sound. Video must have sound-on by default.
  • Minimum Player size. Video width must be at least 300 pixels on Mobile.

Apply for Audience Network In-stream Video

Go to your app dashboard. From the Audience Network menu on the left side of the screen, select Apps and Websites. Then, go to the Apply for Video section. Please review the requirements and, if applicable, click on the Apply button and follow the on-screen instructions.

Integrate Audience Network In-stream Video into Instant Articles:

  1. Generate a new placement ID, selecting “In-stream Video” as the Display Format.
  2. Click on Get Tag to retrieve the In-stream Video VAST tag that you need to place into your video player or ad server.
  3. Be sure to set the pageurl run-time parameter to your video player or ad server macro that returns the full-page URL. **Do not hard-code the URL value. **DFP Example:
    https://an.facebook.com/v1/instream/vast.xml?placementid=836015693211631_1000672220079310&pageurl=%%REFERRER_URL_ESC_ESC%%
    
  4. Place the tag into your video player or ad server.
  5. Embed your player into your website first, then embed it into your Instant Articles code. This ensures we read your sites URL and not the URL associated with Instant Articles in the Facebook App. To embed your player, use the op-interactive class with the <figure> element. Example here:
    <figure class="op-interactive">
       <iframe class="no-margin">
         <video class="video-js" controls="controls" data-video-id="00000000" 
                data-account="00000000" data-player="TestExample" data-embed="default">
         </video>
         <script src="//players.brightcove.net/00000000000/test_example/index.min.js">
         </script>
      </iframe>
    </figure>
    
  6. You're now ready to submit your website for review. In your Audience Network account click on the Apps and Websites tab under Audience Network. Within that section you can add your domain. Send at least one request from that domain and it will go into review. Once your website is approved, it will automatically start showing real ads.