Tracker placement - technical details

Option #1 – auto bootstrapping

Insert the following code where you want to place the tracker: 

<script>(function (d, sid) {if(!document.getElementById(sid)){var s = d.createElement('script');s.id=sid;s.src='https://live.statscore.com/livescorepro/generator';s.async=1;d.body.appendChild(s);}})(document, 'STATSCORE_LMP_GENERATOR_SCRIPT');</script>
<div id="tracker-1" class="STATSCORE__Tracker" data-event="1653325" data-lang="en" data-config="169" data-zone="" data-use-mapped-id="0"></div>


You can configure your tracker by changing HTML element attributes:

  • id - it's the HTML element identifier. In the case where few trackers will be visible on the same page, each id should have different value f.e. "tracker-2", "tracker-3" etc.
  • data-event - this value should include STATSCORE event ID or CUSTOMER event ID.
    Please note: To force the script to use CUSTOMER event ID attribute "data-use-mapped-id" should have value = 1.
  • data-lang - sets the language for tracker
  • data-config - configuration id, different for each customer
  • data-zone - sets time-zone for the tracker. If empty local time-zome will be detected automatically.
  • data-use-mapped-id - switch tracker to use STATSCORE or CUSTOMER event id in data-event parameter to display visualization.
    Possible values:
    "0" - in this case, data-config parameter should store STATSCORE event ID to display visualisation.
    "1" - in this case, data-config parameter should store CUSTOMER event ID to display visualisation and CUSTOMER event ID should be mapped with STATSCORE event ID in STATSCORE system.
     

Event given in the example is a test one and it uses the default configuration (colours, fonts and other visual components) which cannot be changed by passing another configuration id. Final (production) configuration could be customized according to customer expectations.

Option#2 – manual initialization and tracker management

At the bottom of the page, just before the end of the body tag put the script with tracker's library with auto_init=„false” in a query string.

<script rel="script" src="https://live.statscore.com/livescorepro/generator?auto_init=false"></script>

In your code create new STATSCORE.LSP.Generator object which you will use to manage the trackers on the website:

var trackerGenerator = new STATSCORE.LSP.Generator();

IMPORTANT:
Please keep in mind that trackers should be placed accordingly to the documentation. We can't guarantee that everything will work if the script is copied from another website.

Embedding new tracker

In order to embed new tracker, we can use „create” method in our STATSCORE.LSP.Generator() object:

trackerGenerator.create(string domRoot, string identifyingName, int eventId, int configId, (optional) {} additionalConfig);

Parameters description

  • domRoot – a path to DOM element e.g. '.class1 #id div' or DOM element which should contain the tracker

  • identifyingName – new tracker's name (it will end up as id of HTML element of the tracker); must be unique

  • eventId – id of a sport event

  • configId – id of tracker configuration

  • additionalConfig – optional parameter; extra configuration (e.g. language, time zone)

Example 1:
trackerGenerator.create('#trak', 'tracker1', 1653325, 169, {lang:'pl', timezone:'Local'})
Example 2:
trackerGenerator.create('#trak .some-class', 'tracker1653325', 1653325, 169)
Example 3:
trackerGenerator.create(document.querySelector('#trak'), 'tracker3', 1653325, 169, {lang:'en'})
Example 4:
trackerGenerator.create(document.getElementById('trak'), 'tracker3', 1653325, 169, {lang:'en'})

Event given in the example is a test one and used template cannot be changed by passing another configuration id. In the end template could be customized to live up to our customers expectations.

Getting a list of created trackers

To get the list of created trackers you can use the function below:

trackerGenerator.getTrackerList();

Tracker management

We can get created tracker object using „get” method:

 var tracker = trackerGenerator.get(string identifyingName);
  • identifyingName – name of the tracker we want to get. Its same as identifyingName passed in the STATSCORE.LSP.Generator.create() method.

Available methods in tracker object:

  • tracker.remove(); - delete tracker from a tracker list and HTML

  • tracker.refresh(); - reload tracker

  • tracker.setLang(string language) – set tracker language by country code e.g. 'pl'.

  • tracker.setConfig(int configId) – set tracker configuration. Config id for you to use is provided by us.

  • tracker.setTimeZone(string timezone) – set time zone e.g. 'Africa/Accra'.

  • setEvent(int eventId) – set sport event by id e.g. 17028

After changing parameters the tracker has to be reloaded using the „refresh” method e.g.:

tracker.setLang('pl').setEvent(1789).refresh();

Using your event id

To use your event id, you should contact with us to map your event identificators with ours. 

In order to tracker to work with your ids, you need to provide additional parameter in create function.


Example 1

trackerGenerator.create('#trak', 'tracker1', 1653325, 169, {
useMappedId:'1',
})

To switch between your ids or our ids on the fly, you can use the following methods on tracker object:

  • useRegularEventId()

  • useMappedEventId()

After using those methods remember to change event id and call refresh method.


Example 2 

var tracker = trackerGenerator.get({string} identifyingName);
tracker.useRegularEventId().setEvent({number} new event id).refresh();

Set custom template configuration

If for any reason you need a little more customization (change default tab, hide header etc.) you can change the default configuration of your template by adding configuration key to additionalConfig parameter.

Example 1:
trackerGenerator.create('#trak', 'tracker1', 1653325, 169, {
lang:'pl',
timezone:'Local',
configuration:{
showHeader: true
}
});

Available configuration options

Option

Description

showHeader


Type:  bool

This option decides about tracker header visibility

showTimeline


Type: bool

This option decides about tracker timeline visibility

showAds


Type: bool

This option decides about tracker advertisement visibility

mainMenu


Type: string

Possible values: 
Tab names from TabList table separated by comma

Here you can specify which tabs should be shown in the main box

additionalMenu


Type: string

Possible values: 
Tab names from TabList table separated by comma

Here you can specify which tabs should be shown in the additional box (this is a right box in horizontal mode or lower box in vertical mode) This configuration is available only when your template has 2 boxes.

basicRelationMainMenu


Type: string

Possible values: 
Tab names from TabList table separated by comma

This option is the same as mainMenu but it's considered only in basic relation mode. By default basic relation uses BasicEvent instead of Event tab.

basicRelationAdditionalMenu


Type: string

Possible values: 
Tab names from TabList table separated by comma

This option is the same as additionalMenu but it's considered only in basic relation mode.

mainBoxInitializationTab


Type: string

Possible values: 
Tab names from TabList table

This configuration decides which tab should be loaded as first on tracker initialization

additionalBoxInitializationTab


Type: string

Possible values: 
Tab names from TabList table

This configuration decides which tab should be loaded as first in the additional box on tracker initialization

mainBoxBasicRelationInitializationTab


Type: string

Possible values: 
Tab names from TabList table

This option is same as mainBoxInitializationTab but its considered only in basic relation mode.

additionalBoxBasicRelationInitializationTab


Type: string

Possible values: 
Tab names from TabList table

This option is the same as additionalBoxInitializationTab but it's considered only in basic relation mode.

leftBannerImg


Type: string

URL to an image which should be used as a left banner on Live tab. It should be a valid URL to image resource hosted under https protocol. Note that not every configuration supports ads on Live tab and showAds option should be enabled for this to work.

leftBannerLink


Type: string

URL which user is redirected to after he clicks on the left banner

rightBannerImg


Type: string

URL to an image which should be used as a right banner on Live tab. It should be valid URL to image resource hosted under https protocol. Note that not every configuration supports ads on Live tab and showAds option should be enabled for this to work.

rightBannerLink


Type: string

Url which user is redirected to after he clicks on the right banner


Example 2 - change visability

trackerGenerator.create('#trak', 'tracker1', 1653325, 169, {
configuration:{
showHeader: false,
showAds: false
}
})

BEFORE:



AFTER:


Example 2 - change tabs

trackerGenerator.create('#trak', 'tracker1', 1653325, 169, {
configuration:{
mainMenu: 'Event,Comparison,Incidents,Standings',
mainBoxInitializationTab: 'Comparison'
}
})

AFTER:


IMPORTANT:

There is the possibility to display up to 10 tabs on the tracker. To make it easier, we have prepared a table that can be found below. Here you can see the list of all tabs with descriptions.

Select up to 10 tabs listed belowIn addition to these 10 tabs, you can also add these that are working in specified sports:
  • Away
  • AwayParticipantTweets
  • BasicEvent
  • Cards
  • CompactComparison
  • CompactTeamStandings
  • CompetitionTeamStatsCompact
  • CompetitionTweets
  • Comparison
  • CompetitionsStatistics
  • Event
  • EventStatistics
  • Expander
  • ExtendedStandings
  • Fixtures
  • Form
  • Fulltime
  • Halftime
  • Home
  • HomeParticipantTweets
  • Incidents
  • Matches
  • Lineups
  • LiveStream
  • RecentForm
  • Results
  • Scorers
  • Standings
  • Tables
  • Twitter
  • Venue
  • Formula1Event (used only for Formula 1)
  • Formula1Lists (used only for Formula 1)
  • Formula1ResultList (used only for Formula 1)
  • Formula1StartingList (used only for Formula 1)
  • Heats (used only for speedway)
  • Ranking (used only for ski jumping)
  • SpeedwayLineups (used only for speedway)

  • StartList (used only for ski jumping)

Create collapsed tracker

When you don't want to show the full tracker at the start, you can have it set to collapse by default.


Example 1

trackerGenerator.create('#trak', 'tracker1', 1653325, 169, {
configuration:{
mainMenu: 'Event,Comparison,Incidents,Standings,Expander',
mainBoxInitializationTab: 'Expander'
}
})

IMPORTANT:

  • Do not forget to add Expander tab to mainMenu. When initialization tab is missing, the first available tab on the list will be initialized.


Event handling

You can add an event listener to handle some of the tracker events.

Example 1

window.addEventListener('statscore.livematchpro.{your tracker identificator}.{event type}', function(){
console.log('callback');
});


Available event types:

Event nameDescription
readyThis event is triggered when the tracker is loaded.
resizeThis event is triggered when the tracker iframe is resized. Keep in mind that this event is fired not only on resize, we use it internally to handle other stuff too.
errorThis event is triggered when an error occurs that leads to the tracker failing to load. It can be triggered for both external and internal reasons (for example by providing an invalid event id or some system error on our side).


Example 2

window.addEventListener('statscore.livematchpro.tracker1.ready', function(){
console.log('This is tracker1 ready callback');
});

window.addEventListener('statscore.livematchpro.tracker1.resize', function(){
  console.log('This is tracker1 resize callback');
});

window.addEventListener('statscore.livematchpro.tracker1.error', function(){
  console.log('This is tracker1 error callback');
});