AMP Prefetch

The Prefetch API is not part of the default Tickaroo LIVEBLOG plan. Please contact our support if you want to use it.

Fetching a Liveblog as AMP HTML

To call backend APIs you need to supply your Client ID and Client Secret. You need to make sure to protect your Client Secret from end users. Never use a Client Secret in your frontend!

You can fetch the AMP HTML of a liveblog using the following URL:

// fetch json with the liveblog html, css and scripts
https://cdn.tickaroo.com/embed/liveblog-prefetch-amp/amp.json?id=YOURLIVEBLOGID&client_id=YOURCLIENTID&client_secret=YOURCLIENTSECRET

or

// fetch only liveblog amp html
https://cdn.tickaroo.com/embed/liveblog-prefetch-amp/amp.html?id=YOURLIVEBLOGID&client_id=YOURCLIENTID&client_secret=YOURCLIENTSECRET
// fetch only liveblog amp css
https://cdn.tickaroo.com/embed/liveblog-prefetch-amp/amp.css?client_id=YOURCLIENTID&client_secret=YOURCLIENTSECRET
// fetch only liveblog amp scripts
https://cdn.tickaroo.com/embed/liveblog-prefetch-amp/amp_scripts.html?client_id=YOURCLIENTID&client_secret=YOURCLIENTSECRET
// fetch only liveblog amp structured data
https://cdn.tickaroo.com/embed/liveblog-prefetch-amp/amp_schema.html?id=YOURLIVEBLOGID&client_id=YOURCLIENTID&client_secret=YOURCLIENTSECRET

Available parameters:

  • id (String) ID of the liveblog (required)
  • client_id (String) Your Client ID supplied by Tickaroo (required)
  • client_secret (String) Your Client Secret supplied by Tickaroo (required)
  • referer (String) If you don’t send the referer as a header parameter you need to set this one. Will be used to create the pagination links. (required)
  • limit (Integer) The number of items to fetch (default: 15, set to 0 for maximum)
  • locale (String or undefined) set the embed language. Currently, we support ‘en’ and ‘de’ for English and German. (default: en)
  • reverseEvents (Boolean) Will reverse the order of the events (oldest on the top of the livecast) (default: false)
  • handleScoreboard (‘auto’ or ‘off’) determines if the display of a scoreboard should be handled automatically (default: ‘auto’)
  • refreshInterval (Number) the time (in milliseconds) interval to refresh and update the ticker (default: 20000)
  • showEventMeta (‘reporter’ or ‘off’) enables reporter or ticker info in event (default: ‘reporter’)
  • showEventSharing (Boolean) enables ticker events to have sharing buttons that will be visible on mouseover (default:false)
  • showLineup (Boolean) will display line up below the event rows (default: true)
  • showWebEmbeds (‘show’, ‘off’, ‘consent_handling’, ‘custom_consent_handling’) enables web embeds in ticker events (default: ‘show’)
  • showTeamIcons (Boolean) Will display team icons in the scoreboard if provided (team-image) (default: false)

Parameters that have to be passed to the prefetch endpoint if present: (required for the pagination)

  • more
  • is_more_prev
  • deep_link
  • event_local_id

Combining Prefetch in one page

To combine Prefetch in one page it should look like this.

Example:

<!doctype html>
<html >
  <head>
    <link rel="canonical" href="LINK_TO_YOUR_HTML_PAGE">
    <style amp-custom>
      <!-- Insert prefetch amp css
      -->
    </style>
    <!-- Insert prefetched amp scripts
    -->
  </head>
  <body>
    <div id="tickaroo-liveblog">
      <!-- Insert prefetched amp html content
      -->
    </div>
  <body>
</html>

To be honored by the google ranking your html page needs to link to the amp page and vice versa. In the example above the amp links to html page.

This is an example how to link the html to the amp page:

<html>
  <head>
    <link rel="amphtml" href="LINK_TO_YOUR_AMP_PAGE">
  </head>
  <body>
  <body>
</html>

Embeds in Liveblog

Currently this embeds are supported, others are rendered as a linked preview

  • brightcove
  • gfycat
  • instagram
  • soundcloud
  • twitter
  • vimeo
  • youtube

Example Implementation

We implemented AMP Prefetch for our own Newsblog:

Web: https://www.tickaroo.com/about/en/news.html

AMP: https://www.tickaroo.com/about/en/news-amp.html

AMP Cache: https://www.google.com/amp/s/www.tickaroo.com/about/en/news-amp.html