The integration of the PrematchPro 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.Code Block language xml title 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.Code Block language xml title 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
...
- data-config
This value is given by STATSCORE to customers. There is a possibility to have more than one configuration for a customer (for example two different trackers or parts of the tracker on one website). By default STATSCORE prepares one configuration for each customer (however more configurations can be ordered).
On our demo website you can check different configurations (Select template): https://demo-prematchpro.statscore.com
- data-event
STATSCORE'sunique 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.
Example: https://api.statscore.com/v2/booked-events?product=prematchcenter&client_id=2&mapped_status=mapped
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.
booked-events - JSON
| Code Block |
|---|
[{
"id": 123456, // this is STATSCORE event id (numeric)
"client_event_id": "123456789", // this is your event ID (string)
...
},
{
"id": 567890, // this is STATSCORE event id (numeric)
"client_event_id": "qweoy28qry8r7yq83", // this is your event ID (string)
...
}] |
...