Skip to content

Commit 78605f3

Browse files
SKOCHERIskocheri
authored and
seergiioo6
committed
Integration Example: ID import library example (prebid#6434)
* ID Import Library example * Fixing review comments Co-authored-by: skocheri <[email protected]>
1 parent 30baced commit 78605f3

File tree

1 file changed

+351
-0
lines changed

1 file changed

+351
-0
lines changed

‎integrationExamples/gpt/idImportLibrary_example.html

Lines changed: 351 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,351 @@
1+
<html>
2+
<head>
3+
<script>
4+
var pbjs = pbjs || {};
5+
pbjs.que = pbjs.que || [];
6+
</script>
7+
<script src="../../build/dev/prebid.js" async></script>
8+
9+
<script>
10+
var googletag = googletag || {};
11+
googletag.cmd = googletag.cmd || [];
12+
googletag.cmd.push(function() {
13+
googletag.pubads().disableInitialLoad();
14+
});
15+
16+
pbjs.que.push(function() {
17+
pbjs.setConfig({
18+
debug: true,
19+
consentManagement: {
20+
cmpApi: 'iab',
21+
timeout: 1000,
22+
defaultGdprScope: true
23+
},
24+
userSync: {
25+
userIds: [
26+
{
27+
name: "id5Id",
28+
params: {
29+
partner: 173 //Set your real ID5 partner ID here for production, please ask for one at http://id5.io/prebid
30+
},
31+
storage: {
32+
type: "html5",
33+
name: "id5id",
34+
expires: 90,
35+
refreshInSeconds: 8*3600 // Refresh frequency of cookies, defaulting to 'expires'
36+
},
37+
38+
}, {
39+
name: "pubCommonId",
40+
storage: {
41+
type: "html5",
42+
name: "pubcid",
43+
expires: 365
44+
},
45+
}, {
46+
name: 'identityLink',
47+
params: {
48+
pid: '14' // Set your real identityLink placement ID here
49+
},
50+
storage: {
51+
type: 'html5',
52+
name: 'idl_env',
53+
expires: 30
54+
}
55+
},
56+
{
57+
name: "sharedId",
58+
params: {
59+
syncTime: 60 // in seconds, default is 24 hours
60+
},
61+
storage: {
62+
type: "html5",
63+
name: "sharedid",
64+
expires: 28
65+
}
66+
} , {
67+
name: "liveIntentId",
68+
params: {
69+
publisherId: "9896876"
70+
},
71+
storage: {
72+
type: "cookie",
73+
name: "_li_pbid",
74+
expires: 28
75+
}
76+
},
77+
{
78+
name: "zeotapIdPlus"
79+
},
80+
{
81+
name: 'haloId',
82+
storage: {
83+
type: "html5",
84+
name: "haloId",
85+
expires: 28
86+
}
87+
}, {
88+
name: "merkleId",
89+
params: {
90+
ptk: '12345678-aaaa-bbbb-cccc-123456789abc', //Set your real merkle partner key here
91+
pubid: 'EXAMPLE' //Set your real merkle publisher id here
92+
},
93+
storage: {
94+
type: "html5",
95+
name: "merkleId",
96+
expires: 30
97+
},
98+
99+
},{
100+
name: "unifiedId",
101+
params: {
102+
partner: "prebid",
103+
url: "http://match.adsrvr.org/track/rid?ttd_pid=prebid&fmt=json"
104+
},
105+
storage: {
106+
type: "html5",
107+
name: "unifiedid",
108+
expires: 30
109+
},
110+
},{
111+
name: "parrableId",
112+
params: {
113+
// change to Parrable Partner Client ID(s) you received from the Parrable Partners you are using
114+
partner: '30182847-e426-4ff9-b2b5-9ca1324ea09b'
115+
}
116+
},{
117+
name: "criteo"
118+
}
119+
],
120+
syncDelay: 5000,
121+
auctionDelay: 1000
122+
}
123+
});
124+
pbjs.addAdUnits(adUnits);
125+
pbjs.requestBids({
126+
bidsBackHandler: sendAdserverRequest
127+
});
128+
});
129+
130+
function sendAdserverRequest() {
131+
if (pbjs.adserverRequestSent) return;
132+
pbjs.adserverRequestSent = true;
133+
googletag.cmd.push(function() {
134+
pbjs.que.push(function() {
135+
pbjs.setTargetingForGPTAsync();
136+
googletag.pubads().refresh();
137+
});
138+
});
139+
}
140+
var FAILSAFE_TIMEOUT = 2000;
141+
142+
setTimeout(function() {
143+
sendAdserverRequest();
144+
}, FAILSAFE_TIMEOUT);
145+
</script>
146+
147+
<script>
148+
googletag.cmd.push(function() {
149+
googletag.defineSlot('/112115922/FL_PB_MedRect', [[300, 250],[300,600]], 'test-div').addService(googletag.pubads());
150+
googletag.pubads().enableSingleRequest();
151+
googletag.enableServices();
152+
});
153+
pbjs.que.push(function() {
154+
pbjs.setConfig({
155+
idImportLibrary:{
156+
url: 'http://localhost:8090/sync'
157+
},
158+
});
159+
});
160+
</script>
161+
</head>
162+
163+
<style>
164+
body {font-family: Arial, Helvetica, sans-serif;}
165+
166+
/* Full-width input fields */
167+
input[type=text], input[type=password] {
168+
width: 100%;
169+
padding: 12px 20px;
170+
margin: 8px 0;
171+
display: inline-block;
172+
border: 1px solid #ccc;
173+
box-sizing: border-box;
174+
}
175+
176+
/* Set a style for all buttons */
177+
button {
178+
background-color: #4CAF50;
179+
color: white;
180+
padding: 14px 20px;
181+
margin: 8px 0;
182+
border: none;
183+
cursor: pointer;
184+
width: 100%;
185+
}
186+
187+
button:hover {
188+
opacity: 0.8;
189+
}
190+
191+
/* Extra styles for the cancel button */
192+
.cancelbtn {
193+
width: auto;
194+
padding: 10px 18px;
195+
background-color: #f44336;
196+
}
197+
198+
/* Center the image and position the close button */
199+
.imgcontainer {
200+
text-align: center;
201+
margin: 24px 0 12px 0;
202+
position: relative;
203+
}
204+
205+
img.avatar {
206+
width: 40%;
207+
border-radius: 50%;
208+
}
209+
210+
.container {
211+
padding: 16px;
212+
}
213+
214+
span.psw {
215+
float: right;
216+
padding-top: 16px;
217+
}
218+
219+
/* The Modal (background) */
220+
.modal {
221+
display: none; /* Hidden by default */
222+
position: fixed; /* Stay in place */
223+
z-index: 1; /* Sit on top */
224+
left: 0;
225+
top: 0;
226+
width: 100%; /* Full width */
227+
height: 100%; /* Full height */
228+
overflow: auto; /* Enable scroll if needed */
229+
background-color: rgb(0,0,0); /* Fallback color */
230+
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
231+
padding-top: 60px;
232+
}
233+
234+
/* Modal Content/Box */
235+
.modal-content {
236+
background-color: #fefefe;
237+
margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
238+
border: 1px solid #888;
239+
width: 80%; /* Could be more or less, depending on screen size */
240+
}
241+
242+
/* The Close Button (x) */
243+
.close {
244+
position: absolute;
245+
right: 25px;
246+
top: 0;
247+
color: #000;
248+
font-size: 35px;
249+
font-weight: bold;
250+
}
251+
252+
.close:hover,
253+
.close:focus {
254+
color: red;
255+
cursor: pointer;
256+
}
257+
258+
/* Add Zoom Animation */
259+
.animate {
260+
-webkit-animation: animatezoom 0.6s;
261+
animation: animatezoom 0.6s
262+
}
263+
264+
@-webkit-keyframes animatezoom {
265+
from {-webkit-transform: scale(0)}
266+
to {-webkit-transform: scale(1)}
267+
}
268+
269+
@keyframes animatezoom {
270+
from {transform: scale(0)}
271+
to {transform: scale(1)}
272+
}
273+
274+
/* Change styles for span and cancel button on extra small screens */
275+
@media screen and (max-width: 200px) {
276+
span.psw {
277+
display: block;
278+
float: none;
279+
}
280+
.cancelbtn {
281+
width: 100%;
282+
}
283+
}
284+
table, th, td {
285+
border: 1px solid black;
286+
border-collapse: collapse;
287+
}
288+
th, td {
289+
padding: 5px;
290+
}
291+
th {
292+
text-align: left;
293+
}
294+
</style>
295+
</head>
296+
<body>
297+
<img src="https://prebid.org/wp-content/uploads/2021/02/Prebid-Logo-RGB-Full-Color-Medium.svg" alt="Prebid" class="logo-img" data-no-retina="data-no-retina" width="150" data-no-lazy="1">
298+
299+
<h2 style="color:#ff6f00;" >ID Import Library Example</h2>
300+
<h4> Steps before logging in:</h4>
301+
302+
<ul style="font-size:18px;font-family:'Courier New'">
303+
<li>Open console
304+
<ul style="font-size:15px;font-family:'Courier New'">
305+
<li>For Mac, Command+Option+J</li>
306+
<li>Windows/Linux, Control+Shift+J</li>
307+
</ul>
308+
</li>
309+
<li>Search for 'ID-Library' in console</li>
310+
</ul>
311+
312+
<button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Login</button>
313+
314+
<div id="id01" class="modal">
315+
316+
<form class="modal-content animate">
317+
318+
<div class="container">
319+
<label ><b>Username/Email</b></label>
320+
<input type="text" placeholder="Enter Username/Email" name="uname" required>
321+
322+
<label ><b>Password</b></label>
323+
<input type="password" placeholder="Enter Password" name="psw" required>
324+
325+
<button type="submit">Login</button>
326+
<label>
327+
<input type="checkbox" checked="checked" name="remember"> Remember me
328+
</label>
329+
</div>
330+
331+
<div class="container" style="background-color:#f1f1f1">
332+
<button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
333+
<span class="psw">Forgot <a href="#">password?</a></span>
334+
</div>
335+
</form>
336+
</div>
337+
338+
<script>
339+
// Get the modal
340+
var modal = document.getElementById('id01');
341+
342+
// When the user clicks anywhere outside of the modal, close it
343+
window.onclick = function(event) {
344+
if (event.target == modal) {
345+
modal.style.display = "none";
346+
}
347+
}
348+
</script>
349+
350+
</body>
351+
</html>

0 commit comments

Comments
 (0)