The integration of the PrematchCenter tracker is a very simple process which can be achieved in 3 basic steps.
Step 1: Test Tracker placement
The basic test which will show the tracker on your website can be done using our test Tracker. This scenario doesn't require any domain validation or agreement. You can place the tracker wherever you would like to.
To do the test you need to place two pieces of scripts on your website:
Tracker generator:
Include the JavaScript code on your page once, ideally right before closing <body> tag.Tracker generator<script rel="script" src="https://prematch.statscore.com/prematchcenter/generator"></script>
Tracker placeholder:
Place the code for your Tracker wherever you want the Tracker to appear on your page.Tracker placeholder<section id="Tracker-1" class="STATSCORE__Tracker" data-event="1853382" data-lang="en" data-config="203" data-zone="" data-use-mapped-id="0"></section>
- id - it's the html element identifier. In case where few trackers will be visible on the same page, each id should have different value e.g. "tracker-2", "tracker-3" etc.
- class - tracker element should always contain "STATSCORE__Tracker" class
- data-event - this value should include STATSCORE event ID or CUSTOMER event ID.
Please note: To force the script to use CUSTOMER event ID flag "use-mapped-id" should have value = 1. - data-lang - sets language for tracker
- data-config - configuration id, different for each customer
- data-zone - sets time-zone for tracker. If empty local time-zome will be detected automatically.
- use-mapped-id - switch tracker to use STATSCORE or CUSTOMER event id in data-event parameter to display visualisation.
Possible values:
"0" - in this case data-config parameter should store STATSCORE event ID to display widget.
"1" - in this case data-config parameter should store CUSTOMER event ID to display widget and CUSTOMER event ID should be mapped with STATSCORE event ID in STATSCORE system.
Please note:
The test widget has the same parameters as the real one, so you can change parameters like: lang and timezone to see how you can adjust the widget on your website.
Colours, fonts and other styles in the production Tracker can be adjusted at the deployment stage after agreement has been reached.
Step 2: Pairing events with STATSCORE
Customers are being integrated by pairing events identifiers (ID's). STATSCORE is responsible for the automatic pairing process that should cover the major of the mapping process. The only requirement for the customer is to provide the list of teams and events in JSON format as below:
teams list - JSON
{
}] |
Please note:
The attributes listed below are optional and should be sent only if available:
* gender
* country_id
* country_name
events list - JSON
{
|
Please note:
The attributes listed below are optional and should be sent only if available:
* competition_id
* country
* country_id
The list of JSON events should be ordered by start_date that is ascending. It should start from the current time and date and include also "live" events that have already started.
The list of JSON events should be limited to prevent server overload when customers have got a thousands of events in the feed. This can be achieved by few features listed below (marked in red are prefered):
- very important feature is the filter based on TIMESTAMP e.g. timestamp="1490959672" - then we can filter only the customer events which were created or changed after provided timestamp value.
This feature allows to ensure your events will be mapped automatically up to 1 minute after you add this event to your feed. - filter by dates (date_from e.g. "date_from="2015-09-10 11:30:00", date_to e.g. date_to="2015-09-11 11:30:00").
The mapping system goes past the dates and will include the following 6 months. - this feature allows to ensure your events will be mapped automatically up to 190 minutes after you add this event to your feed.
- filter by sport_id separated by comma f.e. sport_id="1,3,5,7", would be good additional feature.
Please note:
the maximum size of the feed should not be greater than 2 MB, if there is more data it should be paginated.
the maximum execution time of the feed should not be longer than 30 seconds.
PAGEBREAK
Step 3: Widget configuration
If the test step is successful we are ready to place the production widget configured according to your needs.
In the production widget you need to set two basic parameters:
- data-config
This value is given by STATSCORE to customers. You can have many configurations for the Prematch Center Widget. By default STATSCORE prepares one configuration for each customer.
- data-event
STATSCORE's unique identifier for an event (match). It should be a numeric value.
All event identifiers are provided by STATSCORE in the API method named booked-events.
Examples of calling this method are listed below:
In this method a customer can find his own event ID (client_event_id attribute). Then he can look for the STATSCORE event ID (id attribute) corresponding to the same event.
To get the right list of booked events the customer needs to call this method with the proper value of CLIENT_ID provided by STATSCORE.
There is also more information provided about the events which could be useful for the customer.
Simplified integration method (Using your event id)
In case you don't need to know id advance which of the games are covered and mapped you can use simple integration method.
Then all you need to do is to switch option: data-use-mapped-id="1" in tracker placeholder script.
For example:
<section id="Tracker-1" class="STATSCORE__Tracker" data-event="1853382" data-lang="en" data-config="203" data-zone="" data-use-mapped-id="1"></section>
If the event is covered and mapped the widget will be automatically displayed.
If any problem occure, proper error message will be returned in the console, and the widget will not be shown.
error handling examle:
window.addEventListener('statscore.livematchpro.tracker1.error', function(){
console.log('This is tracker1 error callback');
});
Event handling describes how to handle such errors to make some fallbacks.
Event handling
You can add 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 name | Description |
|---|---|
| ready | This event triggers when tracker is loaded. |
| resize | This event triggers when tracker iframe was resized. Keep in mind that this event is fired not only on resize, we use it internally to handle some stuff. |
| error | This event triggers on any error occurrence which lead to tracker failing to load. It can be triggered by both external and internal reasons (for example by providing 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');
});