sdk/example.html at master · adhese/sdk · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	 <meta http-equiv="content-language" content="nl"/>
	<meta name="keywords" content="Nieuws, Cultuur, Doe Maar, Edison Awards, popmuziek">
	<meta name="news_keywords" content="Nieuws, 	Cultuur, Doe Maar, Edison Awards, popmuziek">
	<meta property="ad:subject" content="nieuws">
	<meta property="ad:categories" content="Cultuur, Nieuws">
	<meta property="ad:pagetype" content="artikel">
	<meta property="og:title" content="Doe Maar krijgt Edison Oeuvreprijs">
	<meta property="og:url" content="http://www.nrc.nl/nieuws/2012/10/09/doe-maar-krijgt-edison-oeuvreprijs/">
	<meta property="og:image" content="http://www.nrc.nl/wp-content/uploads/2012/10/ANP-1180_20861378-300x193.jpg">
	<meta property="og:description" content="Doe Maar is vanmiddag verrast door de organisatie van de Edison Awards. De groep krijgt in februari de Edison Oeuvreprijs, kregen de mannen op het podium van Paradiso te horen van Frits Spits.
	Doe Maar, dat vanavond optreedt in…">
	<meta property="og:site_name" content="nrc.nl">
	<meta property="og:type" content="article">
	<meta property="article:tag" content="hugo chavez" />
	<meta property="article:tag" content="sean penn" />
	<meta property="article:tag" content="venezuela" />
	<title>Adhese SDK Tagging Examples</title>
	<script type="text/javascript" charset="utf-8" src="dist/adhese.min.js"></script>
	<script type="text/javascript">
		function getLocation() {
			return "_sdk_example_";
		}

		// create Adhese object and initialize
		var adhese = new Adhese();
		adhese.init({debug:true, host:"http://ads.demo.adhese.com/", location: getLocation, safeframe: true });

		// register a user related parameter
		adhese.registerRequestParameter('ag', 40);

                var userConsentGiven = true; // assign this value from your CMP
		// sync user with Rubicon for RTB Gateway purposes, pass your Rubicon ID
		if (userConsentGiven) {
			adhese.syncUser("rubicon",{rp_account:"adhese"});
			adhese.syncUser("pubmatic",{pubmatic_publisher_id:"156572"});
			adhese.syncUser("spotx",{spotx_advertiser_id:"8536"});
			adhese.syncUser("improvedigital",{domain:"user-sync-orange.adhese.com"});
		}

	</script>
	<style type="text/css" media="screen">
		#leaderboard { width:728px; height: 90px; }
		#imu { border: 2px dashed #ffcc00; width: 300px; height: 250px; padding: 5px;}
		#skyscraper { border: 1px solid #ff0000; width: 120px; height: 600px; padding: 4px; margin: 4px;}
	</style>

</head>

<body>
	<h1>Adhese SDK Tagging Examples</h1>
	<p>This page demonstrates several ways of implementing Adhese tags client side to track inventory and show advertisements. The SDK is available at https://github.com/adhese/sdk</p>

	<h2>Legacy document.write tag</h2>
	<p>
		The legacy implementation uses a call for a specific format and writes it directly to the body with a document.write statement.
		This is not applicable in asynchronous requests, and is not the recommended approach when using more complex features like viewable inventory forecasting.
	</p>
	<xmp>
	adhese.tag("leaderboard", {write:true});
	</xmp>
	<div id="leaderboard">
	<script type="text/javascript" charset="utf-8">
		adhese.tag("leaderboard", {write:true});
	</script>
	</div>

	<h2>Multiple formats in one request</h2>
	<p>When several ads are needed for a given page or view in an application, it is more efficient to request all ads at once.</p>
	<p>To create such a request, you first create the ad instances, one for each format you need and add them to an array. </p>
	<xmp>
	var adArray = new Array();
	adArray.push(adhese.tag("rectangle"));
	adArray.push(adhese.tag("skyscraper"));
	</xmp>
	<p>You can then pass the array to the adhese.getMultipleRequestUri function to obtain a URI that will return an array of JSON Ad objects, each containing the format reference you passed.</p>
	<xmp>
	adhese.getMultipleRequestUri(adArray, {'type':'jsonp', callbackFunctionName: 'callbackFunction'})
	</xmp>
	<p>Request this url and catch the response to insert the return ads in their respective containers.</p>
	<xmp>
	AdheseAjax.request({
    		url: adhese.getMultipleRequestUri(adArray, {'type':'json'}),
    		method: 'get',
    		json: true
	})
	.done(function(result) {
    		for (var i = result.length - 1; i >= 0; i--) {
    			document.getElementById(result[i].adType).innerHTML = result[i].tag;
    		};
	});
	</xmp>
	<div id="imu"></div>
	<div id="skyscraper"></div>
	<script type="text/javascript" charset="utf-8">
		var adArray = new Array();
		adArray.push(adhese.tag("imu"));
		adArray.push(adhese.tag("skyscraper"));

		AdheseAjax.request({
    		url: adhese.getMultipleRequestUri(adArray, {'type':'json'}),
    		method: 'get',
    		json: true
		})
		.done(function(result) {
    		for (var i = result.length - 1; i >= 0; i--) {
    			document.getElementById(result[i].adType).innerHTML = result[i].tag;
    		};
		});
	</script>

</body>
</html>