Installation

Get started with Insights by adding a single script tag to your application. No build tools or package managers required.

Script Tag Installation

Add the following script tag to your HTML <head> section:

<script
  type="module"
  src="https://insights.thgaltitude.com/sdk/client.js"
  data-insights-channel="myprotein"
  data-insights-subsite="en"
  data-insights-storefront="nutrition"
></script>

Replace the attribute values with your specific configuration:

channel - Your brand or channel identifier (e.g., myprotein, lookfantastic)
subsite - Your locale or subsite identifier (e.g., en, de, fr)
storefront - Your storefront category (e.g., nutrition, beauty)

The script should be placed within the main template used across your application (e.g., Layout.astro, _app.tsx, or your base HTML template). Loading it in the <head> ensures tracking begins as early as possible.

Complete Example

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>My Application</title>
    <script
      type="module"
      src="https://insights.thgaltitude.com/sdk/client.js"
      data-insights-channel="myprotein"
      data-insights-subsite="en"
      data-insights-storefront="nutrition"
    ></script>
  </head>
  <body>
    <!-- Your content -->
  </body>
</html>

Configuration

Configuration is handled through data attributes on the script tag.

Attribute	Required	Description
`data-insights-channel`	Yes	Your brand or channel identifier
`data-insights-subsite`	Yes	Your locale or subsite identifier
`data-insights-storefront`	Yes	Your storefront category

Example Configuration

<script
  type="module"
  src="https://insights.thgaltitude.com/sdk/client.js"
  data-insights-channel="myprotein"
  data-insights-subsite="en"
  data-insights-storefront="nutrition"
></script>

Verification

After adding the script, verify the installation by checking for the presence of the global insights object via the browser console:

// Check if insights is available
if (typeof window.insights !== "undefined") {
  console.log("Insights loaded successfully");
} else {
  console.error("Insights failed to load");
}

You should also see network requests firing on page load.

Troubleshooting: Events are sent using the Beacon API, which uses a fire-and-forget approach. In some browsers (particularly Chrome DevTools), these requests may appear as “failed” or “cancelled” in the Network tab. This is expected behaviour and does not indicate an actual failure.

Next Steps

Page Types - Configure page type tracking for richer analytics
Event Tracking - Track user interactions with HTML attributes
JavaScript API - Programmatic tracking for advanced scenarios