Examples and FAQ

Doing IVW Conform Counting Using the Tracking Callback

All action that a user started with a click will pass the string “user” in the reason parameter.

<script>
  _tik(function() {
    var ticker = Tickaroo.embedLiveblog({
      container: "#tickaroo-liveblog",
      clientId: YOURCLIENTID,
      id: "540433f6a0b3a0c594d85420",
      handleRefresh: 'notify',
      trackingCallback: function(id, reason, type, foundContent) {
        if(reason === 'user') {
          // TODO: Count IVW
        }
      }
    });
  });
</script>

This example shows how to handle refresh in a way that first shows the number of new items to the user and loads the updates on click. Example assumes jQuery.

<div id="ticker-container">
  <a id="update-link" href="#" style="display: none"></a>
  <div id="tickaroo-liveblog"></div>
</div>
<script>
  _tik(function() {
    var ticker = Tickaroo.embedLiveblog({
      container: "#tickaroo-liveblog",
      clientId: YOURCLIENTID,
      id: "540433f6a0b3a0c594d85420",
      handleRefresh: 'notify',
      trackingCallback: function(id, reason, type, foundContent) {
        console.log('trackingCallback', id, reason, type, foundContent)
        if(type == 'refresh' && foundContent > 0) {
          var text;
          if(foundContent == 1) {
            text = "There is one new item. Click to update.";
          } else {
            text = "There are " + foundContent + " new items. Click to update."
          }
          $('#update-link').show().html(text);
        } else if(type == 'update-pending') {
          $('#update-link').hide();
        }
      }
    });

    $('#update-link').click(function(event) {
      event.preventDefault();
      ticker.updateWithPendingItems();
    });
  });
</script>

Inserting Custom Ads

Note: This feature must be activated by Tickaroo!

<div id="ticker-container">
  <div id="tickaroo-liveblog"></div>
</div>
<script>
  _tik(function() {
    var ticker = Tickaroo.embedLiveblog({
      container: "#tickaroo-liveblog",
      id: "540433f6a0b3a0c594d85420",
      customAdCallback: function(id, callback) {
        console.log('Createing Ad for Ticker ID', id)
        
        // If you want to Render simple HTML
        callback("<div>I am simple HTML</div>");
        
        // If you want to Render simple HTML and then initialize it with custom JS
        callback('<div id="myadcontainer"></div>');
        MyAdFramework.createAd('#myadcontainer')
        
        // If you need legacy support for document.write based ad framworks
        callback('<script>document.write("Hello World!")</script>', true);
      }
    });
  });
</script>

You can use the itemDOMPostProcessor option to add custom HTML to specific items. The function defined in itemDOMPostProcessor will be called for every ticker row before it is displayed and receives the DOM element as first and only parameter. You can make changes to this DOM element at your own discretion and risk. We encourage you to select elements only based on the Tickaroo CSS classes. The following Example adds HTML to mark Videos.

itemDOMPostProcessor: function(domItem) {
 var videos = domItem.querySelectorAll(".tik3-media-item-video");
 for(var i = 0; i < videos.length; ++i) {
   var video = videos[i];
   var customNode = document.createElement('SPAN');
   customNode.innerText = "this is a video";
   video.parentElement.insertBefore(customNode, video);
 }
},

Compatibility

Supported Browsers

The Tickaroo embed API supports all current versions of Edge, Firefox, Chrome and Safari. Backwards compatibility is provided down to IE Version 10. While the Script should work in other modern Browsers such as Opera, we only test and support the browsers listed here.

POLYFILLS

The script includes the following polyfills which will leak into global namespace when applied when native functions are missing:

Known Incompatibilities

Known incompatibilities exist with the following Javascript Frameworks:

  • Mootools versions before 1.5 (Overrides function.bind() in an incompatible way)