Supported callback functions and their expected parameters

📘

The following examples are provided using the football widget library, but these callbacks are supported by all sports in the widget library. All widgets callback will be accessible via window object in the browser and its related sport (football example: window.smpFootballWidgets)

When you see WIDGETS_CONFIGURATION → it means the configuration of your widgets (sdkOptions, widgetAttributes, themes and so on)

Finding all HTML appended widgets and rendering/re-rendering them (LoadSmpWidget)

Use case: When loading all widgets initially (first time in any page)
How to use it:

JavaScript

window.smpFootballWidgets.LoadSmpWidget(WIDGETS_CONFIGURATION)

---

Dynamic import of specific widget (AddSmpWidget)

Use case: When adding widget dynamically (after we have preloaded widgets)
How to use it:

JavaScript

window.smpFootballWidgets.AddSmpWidget(WIDGETS_CONFIGURATION, WIDGET_HTML_ELEMENT)

Additional info: WIDGET_HTML_ELEMENT → should be already created and appended to the DOM as HTML element.

---

Dynamically changing attribute of specific widget (RefreshWidget)

Use case: When updating widget attribute dynamically (after it is already created in the DOM)
How to use it:

JavaScript

window.smpFootballWidgets.RefreshWidget(ELEMENT_DATA_ID)

Additional info: ELEMENT_DATA_ID → each widget has data-id attribute in itself which is automatically generated by us. This is NOT the data-widget-id attribute. You can access it via .getAttribute('data-id') method in the specific widget.

---

Dynamically refreshing widgets (RefreshAllWidgets)

Use case: When updating widget attribute dynamically (after it is already created in the DOM). Good example is adding ODDS to all widgets in the screen or changing their theme dynamically.
How to use it:

JavaScript

window.smpFootballWidgets.RefreshAllWidgets()

Extracting odds count from widgets (ExtractOddsCount)

Use case: When want to extract odds count for widgets (after they are already rendered in the user screen)
How to use it:

If you want to access the odds count (by sport) in the current moment on a specific page, you can execute:

JavaScript

window.smpFootballWidgets.ExtractOddsCount()

// you can try with different sports
window.smpBasketballWidgets.ExtractOddsCount()

If you want to access the odds count in all rendered widgets in the current moment, you can access the global object:

JavaScript

window.smpWidgetsOdds

Widgets nested callbacks

competition

Subscribe to the 'competition' event to get data when a user clicks on a competition.

JavaScript

smpFootballWidgets.subscribe('competition', (data) => console.log('Click competition:', data));

Parameters:

data (Object): An object containing information about the clicked competition.

---

team

Subscribe to the 'team' event to get data when a user clicks on a team.

JavaScript

smpFootballWidgets.subscribe('team', (data) => console.log('Click team:', data));

Parameters:

data (Object): An object containing information about the clicked team.

---

bettingMarketValue

Subscribe to the 'bettingMarketValue' event to get data when a user clicks on an odd market value.

JavaScript

smpFootballWidgets.subscribe('bettingMarketValue', (data) => console.log('Click odd market value:', data));

Parameters:

data (Object): An object containing information about the clicked odd market value

---

matchScore

Subscribe to the 'matchScore' event to get data when a user clicks on a match score.

JavaScript

smpFootballWidgets.subscribe('matchScore', (data) => console.log('Click match score:', data));

Parameters:

data (Object): An object containing information about the clicked match score.

---

bettingLogo

Subscribe to the 'bettingLogo' event to get data when a user clicks on an odd logo.

JavaScript

smpFootballWidgets.subscribe('bettingLogo', (data) => console.log('Click odd market value:', data));

Parameters:

data (Object): An object containing information about the clicked odd logo

onUserInteraction

Subscribe to the 'onUserInteraction' event to get data when a user interact with dropdown/tab/'show more' button.

JavaScript

smpFootballWidgets.subscribe('onUserInteraction', (data) => console.log('User interaction data:', data));

Parameters:

data (Object): An object containing information about the user interaction

This object will be in format (the object values are just example):

JavaScript

{  
  "dataWidgetId": "tennis-tournament-programme",  
  "dataWidgetSport": "tennis",  
  "clickType": "onUserInteraction",  
  "info": {  
    "name": "user_interaction",  
    "entity_type": "tabSelection"  -> this value can be 'tabSelection', 'dropdownSelection', 'showMore'
  }  
}

---

Useful cases for our clients:

Counting displayed odds on any page is important for our clients​, so here we will give example how to extract odds count on each page load and after user interaction with our widgets v2.

First, let initialize needed functions and variables.

JavaScript

const handlers = {};

function createDebouncedHandler(delay, action, sport) {
  let debounceTimer = null;
  return {
    set: function (obj, prop, value) {
      clearTimeout(debounceTimer);
      debounceTimer = setTimeout(() => action(obj), delay);
      if (typeof value === 'object' && value !== null) {
        obj[prop] = new Proxy(value, handlers[sport]);
      } else {
        obj[prop] = value;
      }

      return true;
    },
    get: function (target, prop, receiver) {
      const value = Reflect.get(target, prop, receiver);
      if (typeof value === 'object' && value !== null) {
        return new Proxy(value, handlers[sport]);
      }
      return value;
    },
  };
}

function unwrapProxy(proxy) {
  const isObject = (obj) => obj && typeof obj === 'object';
  const result = Array.isArray(proxy) ? [] : {};

  Reflect.ownKeys(proxy).forEach((key) => {
    const value = proxy[key];
    result[key] = isObject(value) ? unwrapProxy(value) : value;
  });

  return result;
}

const sendAnalyticOddsCount = (widgetCountObj) => {
  if (widgetCountObj && Object.keys(widgetCountObj).length > 0) {
    for (const widgetCuid in widgetCountObj) {
      const widgetOdds = widgetCountObj[widgetCuid];
      if (Object.keys(widgetOdds).length > 0) {
        console.log(`sendAnalyticOddsCount - ${widgetCuid}`, unwrapProxy(widgetOdds));
      }
    }
  }
};

After initializing the needed functions, we can use them:.

JavaScript

      window.addEventListener("smpFootballWidgetsRegistered", (event) => {
        handlers.football = createDebouncedHandler(
          0, // you can customize the delay
          sendAnalyticOddsCount, // or use custom function that handle the odds count event
          "football"
        );

        // you can check what Proxy do (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy)
        window.smpWidgetsOdds.football = new Proxy(
          window.smpWidgetsOdds.football,
          handlers.football
        );

        window.smpFootballWidgets.subscribe("bettingLogo", (data) =>
          console.log("Click betting logo:", data)
        );
        
        window.smpFootballWidgets.subscribe("bettingMarketValue", (data) =>
          console.log("Click betting market value:", data)
        );

        window.smpFootballWidgets.LoadSmpWidget({
          sdkOptions: { ... },
          widgetAttributes: { ... },
          onLoaded: (data) => {
            console.log("loaded widget", data);
          },
        });
      });

Of course our clients should handle their own logic in the subscriptions rather than logging the odds count in the console. This can be implemented for each available widget's sport in your website.

---

Useful cases for our clients that want GA (Google analytics) integrated with odds actions:**

If you want to send Odds events to GA (Google analytics) we recommend the following structure:

1) OddsLoaded:
Event Name: odds_loaded
Parameters:
category: Odds Activity
action: Load
label: Provider:{oddProviderId}
value: {oddProviderLoadedCount} (Numeric, represents loaded odds)

2) LogoClick:
Event Name: logo_click
Parameters:
category: User Interaction
action: Logo Click
label: Provider:{oddProviderId}
value: 1 (Implicit, represents a single interaction)

3) MarketValueClick:
Event Name: market_value_click
Parameters:
category: User Interaction
action: Market Value Click
label: Provider:{oddProviderId}
value: 1 (Implicit, indicates a click)

Please make sure that you added the GA script in your file first and to disable ad blocker extension on the browser (because it is preventing dispatching an events to GA). The scripts looks like that but it depends on the GA version and changes, so its better to see their documentation first:

JavaScript

 <!-- Global site tag (gtag.js) - Google Analytics -->
    <script
      async
      src="https://www.googletagmanager.com/gtag/js?id={YOUR_CODE}"
    ></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag() {
        dataLayer.push(arguments);
      }
      gtag("js", new Date());
      gtag("config", "{YOUR_CODE}");
    </script>

The structure mentioned above can be implemented in the code as follows:

#### Load population

We implemented sendAnalyticOddsCount method above. We just need to implement the logic for GA instead of logging the odds count object in the console:

JavaScript

  const sendAnalyticOddsCount = (widgetCountObj) => {
  	... //same code as previous example
    if (Object.keys(widgetOdds).length > 0) {
      for (const [key, value] of Object.entries(widgetOdds)) {
          gtag("event", "odds_loaded", {
            	category: "Odds Activity",
      			  action: "Load",
            	label: "Provider: " + key,
            	value: value,
       		});
       }
    }
};

#### Logo Click and Market Value Click population

We already subscribed for bettingLogo and bettingMarketValue. We just need to implement the logic for GA instead of logging the odds data in the console:

JavaScript

  window.addEventListener("smpFootballWidgetsRegistered", (event) => {
    ... // the rest code from the previous example
    
    window.smpFootballWidgets.subscribe("bettingLogo", (data) =>
      gtag("event", "logo_click", {
            category: "User Interaction",
      			action: "Logo Click",
            label: "Provider: " + data.info.id,
            value: 1,
       });
    );
    
    window.smpFootballWidgets.subscribe("bettingMarketValue", (data) =>
      gtag("event", "market_value_click", {
            category: "User Interaction",
      			action: "Market Value Click",
            label: "Provider: " + data.info.id,
            value: 1,
       });
    );

    ... // the rest code from the previous example
  });