Insert Audience Network Native Ads Into DFP

The following document provides an overview for integrating Audience Network native ads within an HTML environment, by inserting a JavaScript tag into DFP.

Insert JavaScript tag into DFP

First, follow the Getting Started guide here.

You can plug the ad tag directly into Google DFP. Follow these steps to integrate the Audience Network JavaScript tag into the DFP system:

Generate a passback tag

On generating a passback tag in your DFP, you will receive a javascript code,contained within a single script tag. This javascript code will have to be later integrated into the Audience Network tag.

Example passback tag:

<script src="https://www.googletagservices.com/tag/js/gpt.js">googletag.pubads().definePassback('[placement_id]/Backfill', [[300,250]]).display();
</script>


Note: Your script tag may be different. Please use the one that works for your specific native ads integration.

Create a new line item

Create a custom creative

Sample Code

Alongwith the javascript changes, customize native components in HTML body and CSS. Refer to the sample example below.

Ensure that you enter your Audience Network app ID and Placement ID correctly

<!DOCTYPE html>
<html>
  <head>
    <script> var inDapIF=false;</script>
    <script type='text/javascript' src='https://www.googletagservices.com/tag/js/gpt.js'></script>

    <script type='text/javascript'>//<![CDATA[
    window.onload=function(){
      window.fbAsyncInit = function() {
        FB.Event.subscribe(
          'ad.loaded',
          function(placementID) {

          }
        );

        FB.Event.subscribe(
         'ad.error',
          function(errorCode, errorMessage, placementID) {
            [YOUR_PASSBACK_JAVASCRIPT_CODE_HERE]
          }
        );
        FB.XFBML.parse();
      };

      (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=[APP_ID]';
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));

}//]]> 

    </script>

    <style>
     #ad_root {
        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>

    </head>
    <body>
      <div class="fb-ad" data-placementid="[PLACEMENT_ID]" data-format="native" data-testmode="false"></div>
      <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>
  </body>
</html>

Test and Monitor Performance

When testing with Audience Network ads, embed a test code snippet into the ad request directly:

...

<div class="fb-ad" data-placementid="[PLACEMENT_ID]" data-format="native" data-testmode="true"></div>

Test mode is defaulted to "false". Setting to "true" will enable Audience Network test ads to show on the page.

To access the dashboards, in your app's settings page, click on Audience Network and then choose the Performance tab:

In addition, you can access your performance data via an API. Please see this guide for more info.

Your app needs to be approved for Audience Network to access the performance dashboards. To apply, visit this page.