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. By default the ads display on top of the liveblog entries; pass a position to place them elsewhere.

Constructor signature:

new ScheduledAdManager(start: number, interval: number, html: string | ((index: number) => string), position?: AdPosition)

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, or a function that returns it and receives the running index of the ad (0 for the first ad, 1 for the second, …), e.g. to create unique ad slots. <script> content will be executed!
  • position (optional): Where the ad is placed, see AdPosition below. Defaults to EventTop (on top of the post), which is the behaviour of the three-argument form.

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 =
  'AboveEvent'|'EventTop'|'AboveContent'|'BelowContent'|'BelowComments'|'EventBottom'|'BelowEvent'
  |'BeforeSlide'|'AfterSlide'

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. AboveEvent / BelowEvent place the ad between posts, EventTop / EventBottom inside the post box, AboveContent / BelowContent / BelowComments inside the post’s content area. BeforeSlide / AfterSlide place the ad between posts as well, and turn it into a slide of its own in the horizontal timeline layout (see below).
  • 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>'}
  ]))
})

Ads as slides in the horizontal timeline layout

In the horizontal-timeline layout readers swipe through posts one card at a time. With the positions BeforeSlide and AfterSlide an ad becomes a card of its own: it is placed before or after the matching post’s card, has the same width as the post cards and snaps into place exactly like a post. The time axis above the cards keeps one marker per post; while the ad card is in view, the marker of the post it belongs to stays active.

In every other layout (default, timeline, masonry) the two positions render between posts, exactly like AboveEvent and BelowEvent. One integration therefore works for all layouts:

document.getElementById("liveblog").addEventListener("tickarooLiveblogInit", function (e) {
  // an ad slide after the second post and after every third post from there on
  e.currentTarget.setAdManager(new window.tik4.ComplexAdManager('AfterSlide', [
    {every: 3, first: 1, adCode: createAdSlot}
  ]))
})

The same is available for the simple schedule: new window.tik4.ScheduledAdManager(1, 3, createAdSlot, 'AfterSlide').

All other positions keep their behaviour in the horizontal timeline layout: they render inside the post’s card, as they always did. Existing integrations are not affected unless they switch to BeforeSlide or AfterSlide.

Ads configured in the Tickaroo admin (scheduled ads and link lists) are shown as slides of their own in the horizontal timeline layout, before the post they are scheduled for. In the other layouts they render between posts as before.

Every slide card carries the CSS classes tik4-htl__card tik4-htl__card--extension. For ads delivered through an AdManager (including scheduled ads from the Tickaroo admin), the ad wrapper inside the card additionally carries tik4-extension--slide plus tik4-extension--slide-before or tik4-extension--slide-after, in addition to the between-event classes used in the other layouts. Link-list slides have no such wrapper: their content is the tik4-link-list element itself, so target them via tik4-htl__card--extension .tik4-link-list.

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>