The prebid documentation uses bootstrap for styling. Bootstrap offers a tab component.
<h4>Hello world</h4>
<div id="ad-slot" class="border border-info bg-white mb-2"
style="height:250px; width: 300px">Ad Slot</div>
<button type="button"
class="btn btn-primary"
onclick="exampleFunction()">Interactive</button>
console.log('hello world');
function exampleFunction() {
alert('hey there');
}
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Web Code Example</title>
<!-- required scripts -->
<script async src="//cdn.jsdelivr.net/npm/prebid.js@latest/dist/not-for-prod/prebid.js"></script>
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
</head>
<body>
<!-- javascript -->
<script>console.log('hello world');
function exampleFunction() {
alert('hey there');
}
</script>
<!-- html -->
<h4>Hello world</h4>
<div id="ad-slot" class="border border-info bg-white mb-2"
style="height:250px; width: 300px">Ad Slot</div>
<button type="button"
class="btn btn-primary"
onclick="exampleFunction()">Interactive</button>
</body>
</html>
<h2>Basic Prebid.js Example</h2>
<h5>Div-1</h5>
<div id='div-1'>
<script type='text/javascript'>
googletag.cmd.push(function() {
googletag.display('div-1');
});
</script>
</div>
var sizes = [
[300, 250]
];
var PREBID_TIMEOUT = 700;
var adUnits = [{
code: '/19968336/header-bid-tag-1',
mediaTypes: {
banner: {
sizes: sizes
}
},
bids: [{
bidder: 'appnexus',
params: {
placementId: 13144370
}
}]
}];
// ======== DO NOT EDIT BELOW THIS LINE =========== //
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
googletag.cmd.push(function() {
googletag.pubads().disableInitialLoad();
});
var pbjs = pbjs || {};
pbjs.que = pbjs.que || [];
pbjs.que.push(function() {
pbjs.addAdUnits(adUnits);
pbjs.requestBids({
bidsBackHandler: initAdserver
});
});
function initAdserver() {
if (pbjs.initAdserverSet) return;
pbjs.initAdserverSet = true;
googletag.cmd.push(function() {
pbjs.setTargetingForGPTAsync && pbjs.setTargetingForGPTAsync();
googletag.pubads().refresh();
});
}
setTimeout(function() {
initAdserver();
}, PREBID_TIMEOUT);
googletag.cmd.push(function() {
googletag.defineSlot('/19968336/header-bid-tag-1', sizes, 'div-1')
.addService(googletag.pubads());
googletag.pubads().enableSingleRequest();
googletag.enableServices();
});
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Web Code Example</title>
<!-- required scripts -->
<script async src="//cdn.jsdelivr.net/npm/prebid.js@latest/dist/not-for-prod/prebid.js"></script>
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
</head>
<body>
<!-- javascript -->
<script>var sizes = [
[300, 250]
];
var PREBID_TIMEOUT = 700;
var adUnits = [{
code: '/19968336/header-bid-tag-1',
mediaTypes: {
banner: {
sizes: sizes
}
},
bids: [{
bidder: 'appnexus',
params: {
placementId: 13144370
}
}]
}];
// ======== DO NOT EDIT BELOW THIS LINE =========== //
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
googletag.cmd.push(function() {
googletag.pubads().disableInitialLoad();
});
var pbjs = pbjs || {};
pbjs.que = pbjs.que || [];
pbjs.que.push(function() {
pbjs.addAdUnits(adUnits);
pbjs.requestBids({
bidsBackHandler: initAdserver
});
});
function initAdserver() {
if (pbjs.initAdserverSet) return;
pbjs.initAdserverSet = true;
googletag.cmd.push(function() {
pbjs.setTargetingForGPTAsync && pbjs.setTargetingForGPTAsync();
googletag.pubads().refresh();
});
}
setTimeout(function() {
initAdserver();
}, PREBID_TIMEOUT);
googletag.cmd.push(function() {
googletag.defineSlot('/19968336/header-bid-tag-1', sizes, 'div-1')
.addService(googletag.pubads());
googletag.pubads().enableSingleRequest();
googletag.enableServices();
});
</script>
<!-- html -->
<h2>Basic Prebid.js Example</h2>
<h5>Div-1</h5>
<div id='div-1'>
<script type='text/javascript'>
googletag.cmd.push(function() {
googletag.display('div-1');
});
</script>
</div>
</body>
</html>
The code you need to for this looks like this
<!-- adding prebid and gpt.js if you need it -->
{% include prebidjs-non-prod.html %}
{% include gptjs.html %}
<!-- storing the code inside a variable makes it a lot more readable -->
{% capture htmlCode %}<div id="ad-slot-div-id">
<script type='text/javascript'>
googletag.cmd.push(function() {
googletag.display('div-1');
});
</script>
</div>
{% endcapture %}
{% capture jsCode %}var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
googletag.cmd.push(function() {
googletag.pubads().disableInitialLoad();
});
var pbjs = pbjs || {};
pbjs.que = pbjs.que || [];
// ... and all the prebid and google initializing code
{% endcapture %}
{% include code/web-example.html id="hello-world" html=htmlCode js=jsCode %}
There are few things to understand here
include
directive requires a unique id
for the page. Otherwise the tabs won’t work properly