Inline Ads

The ability to display ads within a liveblog is only available in the Javascript variant of the embed!

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">
</tickaroo-liveblog>

<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 ad
interval: Display an ad every interval entries after start
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 HTML
rules: Array of ComplexAdRule 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>