DFP in Instant article

Question

I'm trying to figure out how to add my DFP ads to my Instant article. Does anyone have any experience with it? Facebook mentioned it is possible, but I can't see any documentation on it on DFP or anywhere else

score 2 · Answer 1 · answered Apr 12 '16 at 13:09

There are two ways according to their documentation. https://developers.facebook.com/docs/instant-articles/ads-analytics. We used the automatic placement and our approach was to create a route to display the ad (a full doc) just for the ad and then use the url through the required iframe src.

in the head of the document you have to use:

<head>
    <meta property="fb:use_automatic_ad_placement" content="true">
</head>

in the body:

<header>    
    <figure class="op-ad">
        <iframe src="your src" height="250" width="300"></iframe>
    </figure>
</header>

score 1 · Answer 2 · answered Aug 17 '16 at 20:12

Here is a GPT tag example to put in a instant article body: (I tried the example on the Facebook help, and there are many errors)

  <figure class="op-ad">
    <iframe height="250" width="300">
        <script async='async' src='https://www.googletagservices.com/tag/js/gpt.js'></script>
        <script>
            var googletag = googletag || {};
            googletag.cmd = googletag.cmd || [];
        </script>

        <script>
            googletag.cmd.push(function() {
                googletag.defineSlot('/XXXXXX/FB_Articles_300x250', [300, 250], 'div-gpt-ad-XXXXXXXXX-0').addService(googletag.pubads());
                googletag.enableServices();
            });
        </script>
        <!-- /133801272/FB_Articles_300x250 -->
        <div id='div-gpt-ad-XXXXXXXXX-0'>
            <script>
                googletag.cmd.push(function() { googletag.display('div-gpt-ad-XXXXXXXXX-0'); });
            </script>
        </div>
    </iframe>
  </figure>

Don't forget to put this line in the header of the instant article:

An example with some context:

<!doctype html>
    <html lang="pt-br" prefix="op: http://media.facebook.com/op#">
    <head>
      <meta charset="utf-8">
      <link rel="canonical" href="https://yoursite/your-article/">
     <meta property="fb:use_automatic_ad_placement" content="true">

       <meta property="fb:article_style" content="default">

       <meta property="op:markup_version" content="v1.0">
    </head>
    <body>

        <article>
            <header>
                <!-- cover -->
                    <figure class="op-ad">
    <iframe height="250" width="300">
      <script async='async' src='https://www.googletagservices.com/tag/js/gpt.js'></script>
      <script>
        var googletag = googletag || {};
        googletag.cmd = googletag.cmd || [];
      </script>

      <script>
        googletag.cmd.push(function() {
          googletag.defineSlot('/XXXXXX/FB_Articles_300x250', [300, 250], 'div-gpt-ad-XXXXXXXXX-0').addService(googletag.pubads());
          googletag.enableServices();
        });
      </script>
      <!-- /133801272/FB_Articles_300x250 -->
      <div id='div-gpt-ad-XXXXXXXXX-0'>
        <script>
          googletag.cmd.push(function() { googletag.display('div-gpt-ad-XXXXXXXXX-0'); });
        </script>
      </div>
    </iframe>
  </figure>
                                <figure>
                        <img src="https://yoursite/your-article/image.jpg" />

                                        </figure>

                <!-- The title and subtitle shown in your Instant Article -->
                <h1>Title;</h1>

                <!-- author(s) -->
                <address>
                    Writen by <a>Author</a>
                                </address>

                <!-- publication date/time -->
                <time class="op-published" datetime="2016-08-16T17:47:42+00:00">16 ago 2016</time>

                <!-- modification date/time -->
                <time class="op-modified" datetime="2016-08-16T17:47:42+00:00">16 ago 2016</time>

            </header>

 <!-- Article body goes here (CONTINUE LIKE A NORMAL INSTANT ARTICLE) -->

score 0 · Answer 3 · answered Jul 27 '18 at 06:53

I have saved both DFP tags and Instant Articles request in the database.

Whenever I make a POST request to sync an article with Instant Articles, we embed the DFP tags on fly into the HTML document which is sent to IA.

While development and testing, we have set the 'development_mode' => 'true' and you can see the article in development articles section.

You can write a code to generate the DFP Ad tag on fly

/**
 * Returns Array of <figure> tags enclosing <iframe> tags inside it.
 *
 * @param $adData
 * @param $slug - Used to set targeting for restricting ads to a specific article
 * @param $isInHouseArticle - Set targeting for avoiding ads for self-company article
 *
 * @return array
 */
private function getDFPAdCode($adData, $slug, $isInHouseArticle)
{
    $DFPAds = [];
    $adData = isset($adData['config']) ? $adData['config'] : [];
    foreach ($adData as $ad) {
        $mappings = isset($ad['mapping']) ? $ad['mapping'] : [];
        $DFPAds [] = '<figure class="op-ad">
              <iframe>
                <script type="text/javascript">
                  var googletag = googletag || {};
                  googletag.cmd = googletag.cmd || [];
                  (function() {
                    var gads = document.createElement("script");
                    gads.async = true;
                    gads.type = "text/javascript";
                    var useSSL = "https:" == document.location.protocol;
                    gads.src = (useSSL ? "https:" : "http:") + "//www.googletagservices.com/tag/js/gpt.js";
                    var node = document.getElementsByTagName("script")[0];
                    node.parentNode.insertBefore(gads, node);
                  })();
                </script>
                <script type="text/javascript">
                var targetting = {
                  "self-company": "' . ($isInHouseArticle ? "TRUE" : "FALSE") . '"
                };
                  googletag.cmd.push(function() {
                    var googleMapping = googletag.sizeMapping();
                    var mappingsArray = ' . json_encode($mappings) . ';
                    for (var i = 0; i < mappingsArray.length; i++) {
                        var mapping = mappingsArray[i];
                        var viewport_size = JSON.parse(mapping.viewport_size);
                        var slot_size = JSON.parse(mapping.slot_size);
                        googleMapping.addSize(viewport_size, slot_size);
                    }

                    var mappings = googleMapping.build();

                    googletag.defineSlot("'. $ad['name'] . '", ' . $ad['sizes'] . ', "' . $ad['div'] . '").setCollapseEmptyDiv(false, false).defineSizeMapping(mappings).addService(googletag.pubads());

                    var url = "' . '/article/' . $slug . '";
                    url = url.toLowerCase();
                    url = url.replace(\'=\', \'_\');
                    url = url.substring(0,40);
                    googletag.pubads().setTargeting("url", url);

                    for (var targetKey in targetting) {
                        var targetValue = targetting[targetKey];
                        googletag.pubads().setTargeting(targetKey, targetValue.toString());
                    }
                    googletag.enableServices();
                  });
                </script>
                <div id = "' . $ad['div'] . '" style = "padding: 0px !important;">
                    <script type="text/javascript">
                      googletag.cmd.push(function() { googletag.display("' . $ad['div'] . '"); });
                    </script>
                </div>
                <div id="facebook-ad"></div>
              </iframe>
            </figure>';
    }

    $insertConfig = !empty($adData[0]['properties']) ? $adData[0]['properties']: [];

    return [$DFPAds, $insertConfig];
}

You can get DFP Ad Code while creating the HTML document for the POST request to Instant Articles API.

DFP in Instant article

3 Answers3