Adding the JavaScript SDK

Adding the JavaScript SDK to your web application is fast and simple.

In the latest version of the JavaScript SDK, integration only involves a single step – adding the Medio SDK bootloader <script> tag to each page you want to instrument.

<script src="//events.medio.com/jssdk" 
        data-medio-key="medio_api_key">
</script>

The <script> tag must contain the following mandatory attributes:

  • The URL of Medio’s JS SDK src=”//events.medio.com/jssdk”.
  • Your Medio API key data-medio-key=”medio_api_key”.
    (Replace medio_api_key with your specific Medio API key).

You can also set a list of common properties at boot loader. These properties are optional, and you can always set them later. Please see “Managing Common Properties and User IDs” for more information.

The SDK loads everything into a global namespace object called Medio. The Medio namespace contains an error property that will either be set to undefined if the SDK loaded cleanly or an instance of the object Error if there was an initialization problem. Once the SDK is loaded without error, the logEvent() method can then be used to send a new event back to DCS.

By default, the SDK will log a page load event every time the SDK finishes loading into the current page. In newer browsers, the SDK will also register itself to also log page load events for the hash navigation URL changes like those that exist in single page applications (SPAs).

Events will automatically capture:

  • Timestamp
  • SDK Version
  • User Agent
  • Locale
  • Platform

First-Party Cookies

The SDK will create by default, a first-party cookie, _medioSdk to store anonymous user ID and session ID (anon_id and session_id). You can use these values if you have not supplied user id or session id as common properties through the JavaScript instrumentation.

If you don’t want our SDK to create the first-party cookie, you can opt out at the Medio SDK bootloader <script> tag, by adding a data attribute data-medio-fpcookie with “false” value. In this case, the SDK will use local storage (if available).

<script src="//events.medio.com/jssdk" 
        data-medio-key="medio_api_key"
        data-medio-fpcookie="false">
</script>

You can always reenable or disable the first-party cookie by calling Medio.Events.setOptions() from the API.

For example, if you want to reenable first-party cookies from UI through the API, you can write:

<button type="button" 
        onclick="Medio.Events.setOptions({
            fpCookie: {
                userConsented: true
            }
        });">
        Enable _medioSdk First-Party Cookie
</button>

If you want to disable it, you’ll need to set userConsented to false:

<button type="button" 
        onclick="Medio.Events.setOptions({
            fpCookie: {
                userConsented: false
            }
        });">
        Disable _medioSdk First-Party Cookie
</button>

Notice that reenabling/disabling first-party cookies is implemented by setting JavaScript Options.

First-party cookie use is configurable through JavaScript Options Medio.Events.setOptions(optionsObject). optionsObject must be a valid JSON object with the key fpCookie, and the value { userConsented: true|false }. userConsented can be either, true or false. Web storage (if available) is used by default when first-party cookie is disabled.