Google DFP advertising

The slots defined on this page will probably eventually expire. We might need to revisit this page to add the final slot IDs

To enable advertising on the application a couple of pre-requisites are needed, the following scripts must be included in the <head>.

These are not included by default as not all applications will want to enable advertising.

ads.js is required specifically to handle ad blocking. It simply adds an attribute "data-ads-unblocked" to the html element if there is no ad blocking. If that attribute isn't found then it loads the ad blocking image instead (controlled through css).

An empty div on the page with the following markup is also needed:

<div id="advertisements" class="advert-300 advert-728 advert-banner"></div>

Please note: example dummy content is added to this page for testing purposes.

<script src="{DESIGN_FRAMEWORK_URI}/scripts/inventory.js"></script>
<script src="{DESIGN_FRAMEWORK_URI}/scripts/adverts.js"></script>

Settings

There are 3 data components to an advert tag :-

  • data-google-slot-id - Is an Ad slot ID that needs to be supplied from AdOps.
  • data-google-target-values - Targetting is performed via this attribute, this is a JSON encoded object of Key Value pairs. Multiple terms can be passed by separating keys with a comma. E.g. 
    {'query':'Science', 'scheme':['Undergraduate','Postgraduate','Teacher Training'], 'region':['England', 'Wales'], 'placement':'bottom-skyscrapper'}
    placement is a special case in that this is a slot level targetted key. All other keys are page level targetted and only the keys of the first ad slot will be loaded (meaning they are a little redundant, apart from the placement kvp obviously)
  • data-google-size - Defines what type of advert we are using. As we only sell 4 advert types (skyscraper, MPU, mobile-banner, vertical rectangle) it is easier if we just hard code the type we wish to use, rather than worry about responsive configuration. The possible values here are hard-coded as 
    skyscraper, mobile-banner, mpu & vertical-rectangle

EXAMPLE GOOGLE SKYSCRAPER CONFIGURATION, SEE RIGHT HAND COLUMN ->
<div
  data-google-slot-id="/231231/TEST_SLOT"
  data-google-target-values="{'query':'Maths','scheme':['Undergraduate','Postgraduate','Teacher Training'], 'region':['England'], 'placement':'bottom-skyscrapper'}"
  data-google-size="skyscraper">
</div>

Google mobile banner - Switch to mobile size in order to see this 


<div 
  data-google-target-values="{'query':'English', 'region':'England', 'placement':'mobile-banner'}" 
  data-google-size="mobile-banner"
  data-google-slot-id="/1217421/SEARCH_ROS_Mobile">
</div>

Available Functions & Events

init function

This function is called on page load. It inserts the required google script tag, makes the inital googletag calls and then makes a call to insertAdverts passing the document as the context

insertAdverts function

This function inserts the actual advert slots into the page and loads the adverts. It is called by the init function on page load. It can be called at any time passing in an optional context. If no context is passed then document will be used. Any existing adverts in the context will NOT be reloaded.

The bottom skyscraper in the right hand column shows an example of this function in action. It is on a 5 second delay to insert a new advert into the container for the bottom advert.

refreshAdverts function

Refreshes the adverts in the context passed to it, if no context is passed then document is used.

The bottom skyscraper in the right hand column shows an example of this function in action. It is on a 10 second interval timer to refresh the adverts in the container for the bottom advert.

dfpAdvertResize event

This is currently only called by _size.js when the page has been resized, we have advert slots, and we move to a different DF breakpoint. It simply refreshes the existing adverts on the page.

You could obviously trigger this function if you want to refresh all adverts, e.g. If you wanted to load new advert creatives for the existing slots (creative = advert picture defined in DFP for a particular line item).