Helika Web SDK - Webflow Integration

The Helika SDK for Webflow enables full functionality of our Helika Web SDK within a Webflow site.

Features

• Streamline integration with Helika services
• Access to a wide range of Helika APIs

📘

Current Version: 0.2.9

Quick Start

To install the Helika SDK for Webflow, you will need to embed some custom code into the head element of your Webflow site. This will allow you to make calls using helikaSDK.createEvent() for all desired tracking.

• Please refer to the API Reference for more details.
• There are a few examples of how calls can be made in the Making Event Calls section.

<script type="module">
  import Helika, { EventsBaseURL } from "https://cdn.jsdelivr.net/npm/[email protected]/+esm";
  const api_key_helika = 'insert_api_key_here' <!-- Replace with your API Key-->
  const helikaSDK = new Helika.EVENTS(api_key_helika, 'game_id', EventsBaseURL.EVENTS_DEV);
  <!-- game_id must be alphanumeric, only underscore, no spaces -->
  window.helikaSDK = helikaSDK;
  helikaSDK.startSession();
</script>

Installation Walkthrough

Pre-requisites

1. Helika API Key
   1. You’ll need a Helika API Key in order to use the snippet.
   2. Please reach out to [email protected] in order to receive an API key for your organization.
2. Event Taxonomy
   1. We strongly recommend following our suggested Event Taxonomy for game event handling and structure. This is due to how we ingest and store data from your game, in order to make it accessible through our Game Management Platform. By following a standardized format, you will be able to access dashboards and other insights faster within the Helika Portal.
   2. Please contact your account representative to get support on Event Taxonomy.

Embedding Custom Code in Webflow

1. Log in to your Webflow account and select your desired website. Click Site Settings located on the left-hand side of the Dashboard.

2. After opening the site settings, look for Custom Code and select it. This will take you to the page where custom code can be embedded on a Webflow site.

   1. For more help with custom code, please refer to the Webflow documentation
   

3. Copy the Helika SDK Snippet into the Head code section.

<script type="module">
  import Helika, { EventsBaseURL } from "https://cdn.jsdelivr.net/npm/[email protected]/+esm";
  const api_key_helika = 'insert_api_key_here' <!-- Replace with your API Key-->
  const helikaSDK = new Helika.EVENTS(api_key_helika, 'game_id', EventsBaseURL.EVENTS_DEV);
  <!-- game_id must be alphanumeric, only underscore, no spaces -->
  window.helikaSDK = helikaSDK;
  helikaSDK.startSession();
  
  <!-- Event calls for page loads go here. See examples below as reference. -->
  
</script>

Making Event Calls

🚧

Please make sure to follow the recommended Event Taxonomy when using createEvent().

1. Event calls on page load can be added in the snippet.

Page Load Example

<script type="module">
  import Helika, { EventsBaseURL } from "https://cdn.jsdelivr.net/npm/[email protected]/+esm";
  const api_key_helika = 'insert_api_key_here'
  const helikaSDK = new Helika.EVENTS(api_key_helika, 'game_id', EventsBaseURL.EVENTS_DEV);
  window.helikaSDK = helikaSDK;
  helikaSDK.startSession();
  
  <!-- Page load calls below -->

  if (window.location.pathname == '/') {
    await helikaSDK.createEvent([{
      game_id: 'game_id',
      event_type: 'event_type_1',
      event: {
        info: 'extra info',
        player_id: 'gamer_1'
      }
    }, {
      game_id: 'game_id',
      event_type: 'event_type_2',
      event: {
        info: 'different info',
        timestamp: 'date'
      }
    }]);
  } else if (window.location.pathname == '/second_page') {
    await helikaSDK.createEvent([{
      game_id: 'game_id',
      event_type: 'event_type_3',
      event: {
        info: 'extra info'
      }
    }]);
  }
</script>

2. Event calls can also be made from event listeners, by calling the helikaSDK.createEvent() method.
   1. Attach a listener to a button event or wherever you want the event to get called.

Event Listener Example

await window.helikaSDK.createEvent([{
  game_id: 'game_id',
  event_type: 'async_event',
  event: {
    user_action: 'async_click'
  }
}])

API Reference

Conventions

The EventsBaseURL is an enum that dictates where to send all API requests. The SDK will handle the set-up for you. You just need to provide an API key and select whether it’s for production or development.
For testing purposes, you can change EVENTS_DEV to EVENTS_LOCAL which logs your events to console.log() instead of sending the events.

enum EventsBaseURL {
  EVENTS_LOCAL,
  EVENTS_DEV,
  EVENTS_PROD
}

Disable Data Settings

You can disable certain information from getting stored by using Events.setDataSettings(DisableDataSettings.All)

enum DisableDataSettings {
  None,
  BrowserInfo,
  DeviceInfo,
  IpInfo,
  OsInfo,
  VpnInfo,
  All
}

Game Event Taxonomy

In order for out event processors to parse your events, they must adhere to a specific guideline.

Example Event

{
  "game_id": "game_id",
  "event_type": "user_download",
  "event": {
    "userId": "user_1",
    "win_number": 1,
    "wallet": "0x4kd...."
  }
}

Automatic Data Capture

The Helika SDK automatically appends some data fields in the event along side your customized data event.

Methods

License

The Helika SDK is released under the MIT License.