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.embedTicker({
      container: "#ticker",
      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="ticker"></div>
</div>
<script>
  _tik(function() {
    var ticker = Tickaroo.embedTicker({
      container: "#ticker",
      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="ticker"></div>
</div>
<script>
  _tik(function() {
    var ticker = Tickaroo.embedTicker({
      container: "#ticker",
      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>

Making the Tickaroo Video Embeds responsive

The following CSS Snippet will set a correct aspect ratio for the Video Player and make it 100% size:

.tickaroo-media-item-video-player {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 0px;
  height: 0;
}
.tickaroo-media-item-video-player iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Fixing CSS Problems with YouTube and Spotify Embeds

We recommend to include the following snippet into your custom CSS to avoid Problems with embeds:

.tickaroo-video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.tickaroo-video-container iframe,
.tickaroo-video-container object,
.tickaroo-video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.tickaroo-web-embed-spotify {
    position: relative;
    padding-bottom: 120%;
    height: 0;
    overflow: hidden;
}

.tickaroo-web-embed-spotify iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

The code will make both embeds responsive.

If you don’t want to use a slideshow/media overlay you are left with broken links on images. To make this more user-friendly you can deactivate the hand cursor on photos. It is important only to target photos and not videos. This can be done with the following CSS:

a.tickaroo-media-item-image {
  pointer-events: none;
  cursor: default;
}

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(".tickaroo-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 IE, Firefox, Chrome and Safari. Backwards compatibility is provided down to IE Version 9 with all features and IE 8 with certain features unavailable (this is subject to change without notice when market share declines!). 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:

WARNING IE8/IE9

  • It only works in IE8/IE9 in standards mode. Compatibility mode is not supported. Please make sure your website is forced to standard mode by adding this meta tag to your site:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
  • Videos are not supported on IE 8

  • Social media integrations are outside our control and may not work correctly on older browsers.

Known Incompatibilities

Known incompatibilities exist with the following Javascript Frameworks:

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