HypeLab Analytics SDK

Our Analytics SDK is designed to provide practical benefits for your HypeLab ads. By integrating this SDK into your website, you will be able to easily share deeper funnel analytics events back to HypeLab, which will help our personalization algorithms learn about what works and what doesn't. Ultimately, this should translate into better return on ad spend (ROAS) for you.

Conversion Overview

When someone takes a specific action after interacting with your ad, that's a conversion. Sending a conversion tells us that a user is engaging in behavior that aligns with your goals! In web3 advertising, conversion actions can be anything from a user connecting their wallet to a player signing up for an NFT whitelist. If you celebrate it and count it as a win, you should be sending a conversion. Here are some of the most common conversions we see:

Connecting a wallet
Submitting a transaction
Clicking on a "Join Discord" link
Completing a quest
Signing up for a whitelist

Send a conversion

In order to send a conversion to our servers, you have to install the HypeLab Analytics SDK, but the installation process is simple! Most of our advertisers tell us that it takes them less than 10 minutes to get up and running. Plus, if you're already using a tag manager, like Google Tag Manager, then it's even faster.

Custom Integration

Find the <head> tag on your website or locate the header template in your CMS or web platform
Copy the code snippet below:

index.html

Copy

<script>
  !(function (h, y, p, e, l, a, b) {
    ((a = document.createElement(h)).async = !0),
      (a.src = y),
      (a.onload = function () {
        (l = new HypeLabAnalytics.Client({
          environment: p,
          propertySlug: e,
          ...l,
        })),
          HypeLabAnalytics.setClient(l);
      }),
      (b = document.getElementsByTagName(h)[0]).parentNode.insertBefore(a, b);
  })(
    "script",
    "https://api.hypelab.com/v1/scripts/ha-sdk.js?v=0",
    "production",
    "<YOUR_PROPERTY_SLUG>",
    {},
  );
</script>

To disable automatic wallet detection, change the last parameter in the function call from {} to { privacy: { disableWalletDetection: true } }

Paste the snippet at the bottom of the header section, just above the closing head tag:

index.html

Copy

<html>
  <head>
    ...
    <!-- Insert HypeLab Analytics here -->
  </head>
  <body>
    ...
  </body>
</html>

Change <YOUR_PROPERTY_SLUG> to your own property slug.
To track an event, like a conversion, add this JS function call wherever you want to track the event:

Copy

HypeLabAnalytics.logEvent("<EVENT_NAME>");

Google Tag Manager Integration

Load the HypeLabAnalytics SDK

Log in to Google Tag Manager and select your website account.
Press add a new tag and enter a name for your tag (e.g. "HypeLab Analytics").
Under Tag Configuration select Custom HTML Tag.
Paste the code snippet below:

<script>
  !(function (h, y, p, e, l, a, b) {
    ((a = document.createElement(h)).async = !0),
      (a.src = y),
      (a.onload = function () {
        (l = new HypeLabAnalytics.Client({
          environment: p,
          propertySlug: e,
          ...l,
        })),
          HypeLabAnalytics.setClient(l);
      }),
      (b = document.getElementsByTagName(h)[0]).parentNode.insertBefore(a, b);
  })(
    "script",
    "https://api.hypelab.com/v1/scripts/ha-sdk.js?v=0",
    "production",
    "<YOUR_PROPERTY_SLUG>",
    {},
  );
</script>

Change <YOUR_PROPERTY_SLUG> to your own property slug.
Under Triggering select All pages.
Save the newly created tag.

Create GTM triggers for your events

All GTM triggers are supported: link clicks, page loads, etc.

You can find detailed docs on triggers in the Google Tag Manager Help Center:

https://support.google.com/tagmanager/answer/7679316

Log an event

Press add a new tag and enter a name for your tag (e.g. "HypeLab Analytics - Track Conversion").
Under Tag Configuration select Custom HTML Tag.
Enter the event code into the HTML input:

<script>
  HypeLabAnalytics.logEvent("<EVENT_NAME>");
</script>

Under Triggering select the trigger where you want the event to fire.
Save the newly created tag.

Submit the GTM workspace update

After you've finished setting up the events in Google Tag Manager, press Submit to deploy the workspace changes to your live website.

FAQ

Q: What information does the SDK collect?

We collect the following:

All automatic events and any custom events that you have instrumented.
General browser information (e.g., URL, user agent, IP, etc.)
Spam & fraud prevention data (e.g., HTTP headers, request IP, etc.) — needed to prevent spam attacks and bot traffic.

Q: What automatic events are sent from the SDK?

For our web SDK, we only send page loads at the moment. In the future, we may collect others, including clicks and page scroll actions.