DFP plugin

Monetize your content with the most professional ad network

Companions

You can maximize your revenue by adding companion ads around your player. This creates a more immersive ad environment which increases the ad value without lowering the user experience.

In this section:

Minimal configuration
Slot configuration
Defining multiple slots
Setting custom default content to your slots
Defining slots the async way
Troubleshooting

Minimal configuration

Defining a companion ad is pretty simple, you only need to follow these 3 steps:

Book a companion ad in DFP
Include the companion javascript support file
Define your companion slot as follows

// Use googletag.defineSlot() to create ad slots.
// Attach the slot to the companion ads service.
//adSlot1 = googletag.defineSlot('/255/AngelaSite/', [728, 90]);
adSlot1 = googletag.defineSlot('/255/AngelaSite/', [300, 250]);
 
adSlot1.addService(googletag.companionAds());
 
// Enable companion ads service
googletag.enableServices();

JavaScript

<div class="clearfix">
<a id="simple"
    style="display:block;width:440px;height:300px; margin-left: 15px;float:left"
    href="http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv">
    <img src="/media/img/home/flow_eye.jpg"
        alt="Search engine friendly content"/>
</a>
<div style="float:left;width: 240px; height: 240px; border: 1px dotted black; margin-top: 30px">
<script>
//  googletag.display('/255/AngelaSite/', [728, 90]);
    googletag.display('/255/AngelaSite/', [300, 250]);
 
</script>
</div>
</div>

HTML

flowplayer("simple", "http://releases.flowplayer.org/swf/flowplayer-3.2.11.swf", {
        clip: {
            ads: [{
                time: 0, // make the overlay appear as soon as the video starts
                request: {
                    adTagUrl:
                        'http://ad.doubleclick.net/pfadx/' +
                        'N270.132652.1516607168321/B3442378.3;' +
                        'dcadv=1379578;sz=0x0;ord=3577745;dcmt=text/xml'
                }
            }]
        },
 
        plugins: {
            controls: {
                url: "flowplayer.controls-3.2.11.swf",
                autoHide: "never"   // we don't want the controlbar to hide
            },
 
            dfp: {
                url: "/media/swf/flowplayer.dfp-flowplayer.org-1.6.5-dev.swf"
            }
        }
    });

JavaScript

Slot configuration

A slot is defined by the network, the site and optionally a zone used for targeting. You need to book a companion in the DFP portal (see help page here) by creating a master/slave relationship between your ad and the companion. You can also link all the companions of one page to the same master ad. This is called Roadblocks.

Once you created the creative in DFP, you need to add some Javascript code to your page in order to tell the Doubleclick system your page is able to display companion ads.

That for, you need to paste the following code in the head tag of your page:

<script language="javascript"
    src="http://www.googletagservices.com/tag/static/google_services.js">
</script>
<script type="text/javascript">
    // Use googletag.defineSlot() to create ad slots.
    // Attach the slot to the companion ads service.
    adSlot1 = googletag.defineSlot('/YOUR_NETWORK/YOUR_SITE/YOUR_ZONE',
                [300, 250]);
    adSlot1.addService(googletag.companionAds());
 
    // Enable companion ads service
    googletag.enableServices();
</script>

HTML

And the following code where you want to display the companion:

<script type="text/javascript">
   // Use the same name as in defineSlot
   googletag.display('/YOUR_NETWORK/YOUR_SITE/YOUR_ZONE', [300, 250]);
</script>

HTML

You only need to define the identifier and the size of the slot in order to call defineSlot and display. They both take two parameters:

the identifier of the slot, composed by the network, site and an optional zone parameter, separated by a slash: 255/AngelaSite/
the size of the slot. This size should be [300, 250] or [728, 90]

Defining multiple slots

Defining multiple companion is as easy as defining only one, just add more slots in the Javascript code.

// Use googletag.defineSlot() to create ad slots.
// Attach the slot to the companion ads service.
adSlot1 = googletag.defineSlot('/255/Angela/', [300, 250]);
adSlot1.addService(googletag.companionAds());
 
adSlot2 = googletag.defineSlot('/255/Angela/', [728, 90]);
adSlot2.addService(googletag.companionAds());
 
// Enable companion ads service
googletag.enableServices();

JavaScript

<div class="clearfix" style="height:600px">
<div id="multiple" style="display:block;width:425px;height:300px;margin-bottom:30px"></div>
<!-- Use googletag.display() in the page where you want the companion ad to appear.
     No need to declare div. -->
<script type="text/javascript">
   // Use the same name as in defineSlot
   googletag.display('/255/AngelaSite/', [300, 250]);
</script>
 
<script type="text/javascript">
   // Use the same name as in defineSlot
   googletag.display('/255/AngelaSite/', [728, 90]);
</script>
</div>

HTML

flowplayer("multiple", "http://releases.flowplayer.org/swf/flowplayer-3.2.11.swf", {
        clip: {
            ads: [{
                time: 0, // make the overlay appear as soon as the video starts
                request: {
                    adTagUrl:
                        'http://ad.doubleclick.net/pfadx/' +
                        'N270.132652.1516607168321/B3442378.3;' +
                        'dcadv=1379578;sz=0x0;ord=3577745;dcmt=text/xml'
                }
            }]
        },
 
        plugins: {
            controls: {
                url: "flowplayer.controls-3.2.11.swf",
                autoHide: "never"   // we don't want the controlbar to hide
            },
 
            dfp: {
                url: "/media/swf/flowplayer.dfp-flowplayer.org-1.6.5-dev.swf"
            }
        }
    });

JavaScript

Setting custom default content to your slots

By default, googletag.display only reserves space for the companion ad. As this might not fit your design, you can provide custom default content.

// Use googletag.defineSlot() to create ad slots.
// Attach the slot to the companion ads service.
//adSlot1 = googletag.defineSlot('/255/AngelaSite/', [728, 90]);
adSlot3 = googletag.defineSlot('/255/AngelaSite/', [300, 250]);
adSlot3.addService(googletag.companionAds());
// set content for slot
 
adSlot3.addService(googletag.content());
googletag.content().setContent(
      adSlot3,
      "<iframe src='/media/img/dfp/banner.png' width='300' height='250'" +
      "marginwidth=0 marginheight=0 scrolling=no></iframe>");
 

// Enable companion ads service
googletag.enableServices();

JavaScript

<div class="clearfix">
<div style="float: left">
<a id="custom"
    style="display:block;width:400px;height:300px; margin-left: 15px;"
    href="http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv">
   <img src="/media/img/home/flow_eye.jpg"
    alt="Search engine friendly content"/>
</a>
</div>
<div style="width: 280px; height: 250px; border: 1px dotted black; margin-left: 420px; margin-top: 30px">
<script>
    googletag.display('/255/AngelaSite/', [300, 250]);
</script>
</div>
</div>

HTML

flowplayer("custom", "http://releases.flowplayer.org/swf/flowplayer-3.2.11.swf", {
        clip: {
            ads: [{
                time: 0, // make the overlay appear as soon as the video starts
                request: {
                    adTagUrl:
                        'http://ad.doubleclick.net/pfadx/' +
                        'N270.132652.1516607168321/B3442378.3;' +
                        'dcadv=1379578;sz=0x0;ord=3577745;dcmt=text/xml'
                }
            }]
        },
 
        plugins: {
            controls: {
                url: "flowplayer.controls-3.2.11.swf",
                autoHide: "never"   // we don't want the controlbar to hide
            },
 
            dfp: {
                url: "/media/swf/flowplayer.dfp-flowplayer.org-1.6.5-dev.swf"
            }
        }
    });

JavaScript

Defining slots the async way

Sometimes you don't want to load 6k of Javascript only to display a companion ad that will be shown later. You can load first a smaller piece of Javascript that will only define functions and load the real javascript file after.

The code doesn't change much, the only thing you need to do is to load the google_services_async.js at the beginning of the page, leave the googletag.display calls where they are, and move the slots declaration Javascript block to the end of your page.

<div id="async" style="display:block;width:425px;height:300px;"></div>
<div style="width: 280px; height: 250px; border: 1px dotted black; margin-left: 420px; margin-top: 30px">
<script>
    googletag.display('/255/AngelaSite/', [300, 250]);
</script>
</div>

HTML

flowplayer("async", "http://releases.flowplayer.org/swf/flowplayer-3.2.11.swf", {
        clip: {
            url: "http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv",
            ads: [{
                time: 0, // make the overlay appear as soon as the video starts
                request: {
                    adTagUrl:
                        'http://ad.doubleclick.net/pfadx/' +
                        'N270.132652.1516607168321/B3442378.3;' +
                        'dcadv=1379578;sz=0x0;ord=3577745;dcmt=text/xml'
                }
            }]
        },
 
        plugins: {
            controls: {
                url: "flowplayer.controls-3.2.11.swf",
                autoHide: "never"   // we don't want the controlbar to hide
            },
 
            dfp: {
                url: "/media/swf/flowplayer.dfp-flowplayer.org-1.6.5-dev.swf"
            }
        }
    });

JavaScript

<!-- Use googletag.display() in the page where you want the companion ad to appear.
     No need to declare div. -->
<script type="text/javascript">
   // Use the same name as in defineSlot
   googletag.display('/255/AngelaSite/', [300, 250]);
</script>
 
<!-- Include the real Javascript support file and declare your slots at the end of your page,
    when critical content has already been loaded -->
<script language="javascript"
    src="http://www.googletagservices.com/tag/static/google_services.js">
</script>
<script type="text/javascript">
    // Use googletag.defineSlot() to create ad slots.
    // Attach the slot to the companion ads service.
    adSlot1 = googletag.defineSlot('/255/Angela/', [300, 250]);
    adSlot1.addService(googletag.companionAds());
 
    // Enable companion ads service
    googletag.enableServices();
</script>

HTML

Troubleshooting

If your companion ad doesn't show up, please check the following points:

You trafficked a companion ad, and linked it to your master ad (more information here)
You included the google_services.js script
You added the code needed to declare the companion ad and its identifier matches your trafficked companion, both network/site and size
You added the code needed to actually display the companion
You are including Flowplayer on the page using flowplayer() or $f() or using allowscriptaccess = true
Make sure there are no CSS rules hiding your companion ad

If your ad still doesn't show up, check your browser's error console. When all of the above fails, contact the official Flowplayer support.

Companions

Minimal configuration

Slot configuration

Defining multiple slots

Setting custom default content to your slots

Defining slots the async way

Troubleshooting

Flowplayer Twitter feed