Using django-ad-code with DoubleClick¶
DoubleClick is an ad serving and ad management tool owned and run by Google. There is also a DoubleClick for Publishers (DFP) Small Business. This section details using django-ad-code to work with the asynchronous Google Publisher Tag code.
This not meant to be a comprehensive guide on using DoubleClick only a guide on integrating your DoubleClick inventory with django-ad-code.
Note
This documentation is primarily for example purposes and should not be taken as an endorsement of DoubleClick.
Header Template¶
The adcode/header.html
should contain the asynchronous googletag code as well
as define the slots for your page based on the current set of placements. An
example of what this might look like is given below.
{% if section and placements and not debug %} <script> 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> googletag.cmd.push(function() { {% for placement in placements %} googletag.defineSlot( '{{ placement.remote_id }}', [{{ placement.width }}, {{ placement.height }}], 'div-gpt-ad-{{ placement.id }}' ).addService(googletag.pubads()); {% endfor %} googletag.pubads().enableSingleRequest(); googletag.enableServices(); }); </script> {% endif %}
Here you can see that the Placement.remote_id
stores the ad unit name.
You can adapt this to fit your needs to include additional targetting. See the prior
section on customizing the header template.
Placement Template¶
The adcode/placement.html
is responsible for rendering the individual placements
in the body content. The element id
needs to match the id
given in defineSlot
call in the header. In this example we used 'div-gpt-ad-{{ placement.id }}'
so
we will be consistant in the placement template.
<div id="div-gpt-ad-{{ placement.id }}"> {% if debug %} <img alt="{{ placement }}" src="{{ placement.placeholder }}"> {% else %} <script type="text/javascript"> googletag.cmd.push(function() { googletag.display("div-gpt-ad-{{ placement.id }}"); }); </script> {% endif %} </div>
This will render the placeholder image if DEBUG=True
. If necessary this can
be customized on a per section or per placement basis.