Inline Ads
Setting an AdManager
To start showing inline Ads within a Liveblog, an AdManager instance must be created and attached to the tickaroo-liveblog element. Tickaroo offers two predefined AdManagers.
Example:
<tickaroo-liveblog
id="liveblog"
liveblogId="5f47bdba2a03d3abfab3c607"
clientId="5c99e3358dce8c729e697547"
/>
<script>
document.getElementById("liveblog").addEventListener("tickarooLiveblogInit", function (e) {
var adManager = new window.tik4.ScheduledAdManager(0, 2, '<div>This is the Ad Code</div>')
document.getElementById("liveblog").setAdManager(adManager)
})
</script>
ScheduledAdManager
The ScheduledAdManager will insert ads by a fixed schedule. Ads will always display on top of liveblog entries.
Constructor signature:
new ScheduledAdManager(start: number, interval: number, html: string)
Parameters:
start
: The index of the first post to display an adinterval
: Display an ad everyinterval
entries afterstart
html
: The ad tag HTML to insert.<script>
content will be executed!
ComplexAdManager
The ComplexAdManager allows to insert specific ads in specific sports events, as well as define an ad schedule. The positioning of the ad within the Liveblog Post HTML can be selected.
type AdPosition = 'EventTop'|'AboveContent'|'BelowContent'|'BelowComments'|'EventBottom'
interface ComplexAdRule {
// The Ad HTML Code to Insert `<script>` content will be executed!
// Must be constant or will trigger random rerenders
adCode: string | ((index: number) => string)
// Ad rule that should target a specific event, can optionally be combined with teamId
eventType?: string
// Ad rule that should target a specific team, can optionally be combined with eventId
teamId?: string
// For an ad rule that represents a schedule, the index of the first post to have an ad
first?: number
// For an ad rule that represents a schedule, the interval after the previous ad, the next one should appear
every?: number
// For any ad rule type, the maximum amount of matches. If more posts match, the ad rule will not apply.
// If ommitted there is no limit
maxMatches?: number
}
new ComplexAdManager(adPosition: AdPosition, rules: ComplexAdRule[])
Parameters:
adPosition
: The positioning of the ad within the Liveblog Post HTMLrules
: Array ofComplexAdRule
will be evaluated top to bottom. The first matching rule wins.
Example Usage:
const GERMANY = '633ff3c7c9e990d7dce218ba'
const TURKEY = '633ff3dec9e9908647e218ca'
// or BelowContent or BelowComments
document.getElementById("liveblog").addEventListener("tickarooLiveblogInit", function (e) {
e.currentTarget.setAdManager(new window.tik4.ComplexAdManager('EventBottom', [
{eventType: 'soccer.goal', teamId: GERMANY, adCode: '<div style="background-color: red">Ad Rule Hit (Germany)</div>'},
{eventType: 'soccer.goal', teamId: TURKEY, adCode: '<div style="background-color: blue">Ad Rule Hit (Turkey)</div>'},
{eventType: 'soccer.end', adCode: '<div style="background-color: blue">Ad Rule Hit (Game Over)</div>'},
{every: 5, first: 1, adCode: '<div style="background-color: green">Scheduled Ad</div>'}
]))
})
Other Use Cases / Custom AdManager Implementations
If you have any other use cases, please contact our support
Integrating Specific Ad Systems
Google Tag Manager
For Google Tag Manage unique ad slots must be defined for each ad created. To accomplish this, a function must be passed to the ad manager generating dynamic html with a script that executes and dynamically creates an ad slot.
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
window.googletag = window.googletag || {cmd: []};
googletag.cmd.push(function() {
googletag.enableServices();
});
</script>
<script async src="https://cdn.tickaroo.com/webng/embedjs/tik4.js"></script>
<tickaroo-liveblog id="liveblog" liveblogId="5f47bdba2a03d3abfab3c607" clientId="5c99e3358dce8c729e697547"></tickaroo-liveblog>
<script>
function createAdSlot(index) {
return `<div id="inline-ad-${index+1}">
<sc` + `ript type="text/javascript">
googletag.cmd.push(function() {
googletag.defineSlot('/123456789/MyPage/liveblog', [300, 250],'inline-ad-${index+1}')
.addService(googletag.pubads());
googletag.display('inline-ad-${index+1}');
});
</sc`+ `ript>
</div>`
}
function initAdManager() {
document.getElementById("liveblog").setAdManager(new window.tik4.ScheduledAdManager(1, 5, createAdSlot))
}
document.getElementById("liveblog").addEventListener("tickarooLiveblogInit", initAdManager)
</script>