Skip navigation
Search
Search

Not sure what to do?

Browse subjects, locations and universities

Popular topics

Popular subjects

-

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 in terms of size and any custom breakpoints. There are 5 advert types (skyscraper, MPU, mobile-banner, vertical rectangle and custom). For all types you can specify the responsive configuration using min and max breakpoints. Furthermore for the 'custom' type you can specify the adverts height and width. The possible values here are hard-coded as 
    skyscraper, mobile-banner, mpu, vertical-rectangle and custom

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 custom size advert


EXAMPLE GOOGLE CUSTOM CONFIGURATION ->
<div
  data-google-slot-id="/1217421/UCAS_2018_Clearing/UCAS.com_ClearingHP_Slot1"
  data-google-target-values="{}"
  data-google-size="{'size':'custom', 'width': 300, 'height': 200, 'min': 300, 'max': 9999}">
</div>

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


EXAMPLE GOOGLE MOBILE CONFIGURATION ->
<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>

Google MPU size banner with min size


EXAMPLE GOOGLE MPU WITH MIN SIZE CONFIGURATION ->
<div
  data-google-target-values="{}"
  data-google-size="{'size':'mpu', 'min': 700}"
  data-google-slot-id="/1217421/IA_Dashboard19/IA_Search_Courses_300x250_Slot1">
</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).