Option #1 – auto bootstrapping

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

...

• 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.
   

Eventgiven in the example  example is a test one and it uses the default configuration (colorscolours, 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>

...

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:

...

• domRoot – a path to DOM element e.g.'.class1 #id div' or DOM elementwhich 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 oftracker configuration

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

...

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

...

Example 1

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

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

• useRegularEventId()

• useMappedEventId()

After using those methods remember 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();

...

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

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 a the possibility to display up to 10 tabs in on the tracker. To make it easier, we have prepared a table that can be seen found below. Here you can see the list of all tabs with descriptions for all of them.

Create collapsed tracker

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

Example 1

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

...

• 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.

...

...