Login/password for demo TDS: boss:bossadmin
This is an example on how to serve and rotate targeted ads on your site(s). BossTDS is not dedicated ad serving software per se, still it is quite possible to use it in this role.
So, we have 4 ads to display:
-
this ad is for German visitors only. It will send them to http://dw.de. -
this ad is for French visitors only. It will send them to http://lemonde.fr. -
this ad is for visitors from the rest of the world. It will send them to http://amazon.com. -
this ad is for visitors from the rest of the world as well. It will send them to http://ebay.com.
The last two ads should be rotated: on the first hit a random ad should be displayed, on the second hit the second ad wil be displayed etc.
We put all images to /opt/bosstds/static/images/ directory. You might use another directory under /static/ if you want, or even put the images on some your other site.
We use a scheme named "Ads". Open this link in another tab. To see all the scheme properties click on change button in the rightmost column.
In the scheme properties we set IN Url to ads.
All traffic sent to http://demotds.bosstds.com/in/ads/ will be redirected to one of
OUTs of
this scheme.
We set Default OUT Url to http://none.com. In this
case this is just a
placeholder value, it is never used as our OUTs will catch all the possible traffic.
The Smart rotate OUTs for non-uniques is
Weight OUTs only - default value.
Rest properties are left with default values.
We've added a so-called "file" named ad - click to see it.
The Content Type property of this file is
JSONP. This mode is used when you need to execute
javascript from different domain, something prohibited by typical web browsers because of the same origin policy.
This file contains the following data:
{"pix": "{{ __OUTURL__ }}", "target": "{{ targeturl }}"}
This is valid json string data with two variables:
{{ __OUTURL__ }} will be substituted with
the Url of an OUT; {{ targeturl }} will be substituted
with the variable named targeturl.
We've added four OUT Urls - two sequential and two weight. Click on OUT Urls
button at the left of change button to see them all.
Each of these OUTs will contain a link to an image of the ad plus a link to target page.
- The first OUT
is for French visitors. We set its' Mode
to Sequential, its' Url
to http://demotds.bosstds.com/static/images/ad-vote-fr.png (the location of the
ad image) and
also we added a variable via Transformation with Type = Constant,
Name = http://lemonde.fr
and Put into = targeturl.
We changed Redirection method to 200 OK, from file and set File to ad. It means that instead of redirecting to the OUT Url via 302 Moved reponse, we will send 200 OK response which contains content of the file named Put into = ad as payload. We've just created such file on a previous step.
And last but not least - we added a single filter to this OUT - a GeoIP filter which accept French traffic only. - The second OUT
is for German visitors. We set its' Mode
to Sequential, its' Url
to http://demotds.bosstds.com/static/images/ad-vote-de.png (the location of the
ad image) and
also we added a variable via Transformation with Type = Constant,
Name = http://dw.de
and Put into = targeturl.
Again, we changed Redirection method to 200 OK, from file and set File to ad.
We added a single filter to this OUT - a GeoIP filter which accept German traffic only.
As you can see both OUTs have the same Order. It doesn't matter as both OUTs have mutually exclusive GeoIP filter. - The third and
The fourth OUTs are for the
rest of the world.
We set Urls to http://demotds.bosstds.com/static/images/ad1.png and http://demotds.bosstds.com/static/images/ad2.png, added the same variable as for the previous two OUTs but with different Name (http://amazon.com and http://ebay.com) and again, changed Redirection method to 200 OK, from file.
The Mode is Weight now, with the same weight for both OUTs.
Now let's think. We cannot just redirect to these OUTs as they are, after all, not 302 redirections. We need to
show a picture and send the visitor to a page only when he clicks on the picture.
There are lots of js libraries which help you to work with JSONP data. We will
show you two methods: jQuery and plain javascript with no libraries.
JQuery
-
Add somewhere on the top of your page link to jQuery library. In our case it is
<script src="/static/template/scripts/jquery.1.7.2.js"></script> -
Create a div for your ads. For example,
<div id="ad">
</div> -
Create a script which will be run on page load, for example:
<script> $(document).ready(function () {
var jqxhr = $.getJSON("http://demotds.bosstds.com/in/ads/?callback=?", function (json) {
$("#ad").html("<a href='" + json.target + "' target='_blank'><img src='" + json.pix + "' /></a>") });
})
</script> -
Below is the result of this setup. Depending on your IP you will see one of four ads:
;
Plain javascript
-
Create a div for your ads with two scripts within. For example,
<div id="ad2">
<script>
function callback(json) {
document.write("<a href='" + json.target + "' target='_blank'><img src='" + json.pix + "' /></a>");
}
</script>
<script type="application/javascript"
src="http://demotds.bosstds.com/in/ads/?callback=callback">
</script>
</div> -
Below is the result of this setup. Depending on your IP you will see one of four ads:
