Helika Docs

Webflow Integration

Suggest Edits

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.3.2

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. 

<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);
  helikaSDK.setPIITracking(false);
  helikaSDK.setAppDetails({
    platform_id: 'server', // Optional - android, ios, web, desktop, etc.
    server_app_version: '1.0.0' // optional - set only if the sdk is installed on the server
  })
  helikaSDK.setUserDetails({
    user_id: '123456',  // if available, otherwise, we will generate an anonymous id for this user
    email: '[email protected]', // Optional
    wallet_id: '0x4kd....' // Optional
  })
  <!-- 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 Your Client Success Manager 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);
  helikaSDK.setPIITracking(false);
  helikaSDK.setAppDetails({
    platform_id: 'server', // Optional - android, ios, web, desktop, etc.
    server_app_version: '1.0.0' // optional - set only if the sdk is installed on the server
  })
  helikaSDK.setUserDetails({
    user_id: '123456',  // if available, otherwise, we will generate an anonymous id for this user
    email: '[email protected]', // Optional
    wallet_id: '0x4kd....' // Optional
  })
  <!-- 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);
  helikaSDK.setPIITracking(false);
  helikaSDK.setAppDetails({
    platform_id: 'server', // Optional - android, ios, web, desktop, etc.
    server_app_version: '1.0.0' // optional - set only if the sdk is installed on the server
  })
  helikaSDK.setUserDetails({
    user_id: '123456',  // if available, otherwise, we will generate an anonymous id for this user
    email: '[email protected]', // Optional
    wallet_id: '0x4kd....' // Optional
  })
  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>
  1. 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

🚧

Please refer to the Helika Web SDK docs for the latest API information

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
}

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": {
    "event_sub_type": "webpage_download",
    "win_number": 1,
  }
}

Automatic Data Capture

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

FieldTypeRequired/OptionalDescription
game_idstringrequiredThe Game Identifier attribute for all events generated for this game
created_atDateTimerequiredThe timestamp when the event was created.
session_idu4requiredThe sdk generates a new Session ID when the Helika Object is created.
utmsobjectoptionalThe SDK parses the url parameters and records any important or interesting UTMs.
helika_referral_linkstringoptionalThe Referral Link ID of the link that the user clicked in order to get to the game’s landing page.
user_detailsobjectrequiredThe user details set by 'setUserDetails'
app_detailsobjectrequiredThe app details set by 'setAppDetails'

Methods

NameURLParameterDescription
constructorEvents()api_key: string,
game_id: string,
baseURL: EventsBaseURL		Constructs the Event Service
Start SessionEvents.startSession()This starts a user session, stores identifying user information, and UTMs that will get appended to events.
Create EventEvents.createEvent()events: {
game_id: string,
event_type: string,
event: Object
}[]		Sends the events to the Helika services
Create User EventEvents.createUserEvent()events: {
game_id: string,
event_type: string,
event: Object
}[]		Sends the events with user information to the Helika services
Get PII TrackingEvents.getPIITrackingReturns the value of PII Tracking
Set PII TrackingEvents.setPIITracking()piiTracking: booleanThis function disables tracking of personal identifiable information (PII) to comply with privacy regulations.
Get App DetailsEvents.getAppDetails()Obtainsthe currently set app_details
Set App DetailsEvents.setAppDetails()details: ObjectSets the app_details field that gets added to all events
Get User DetailsEvents.getUserDetailsObtains the currently set user_details
Set User DetailsEvents.setUserDetails()details: ObjectGets the user_details that will get appended to all events
Set EnabledEvents.setEnabled()enabled: booleanSets whether it's sending the events to our data pipeline or simply logging the event to console.log(). This is used for testing purposes.
Is EnabledEvents.isEnabled()Gets whether the Sending Events is enabled or disabled

License

The Helika SDK is released under the MIT License.

Updated about 2 months ago