SDK Integration

This document provides steps for integrating your browser with Hackle via the Hackle SDK for web browsers created with React. SDK Integration is a must in order to use the functions we provide.

Step 1: Add Dependencies

Think of this step as importing our SDK into your codebase. To use our Hackle services add the following dependency code and import our SDK.

npm install --save @hackler/react-sdk

Step 2: Initialize the SDK

Once you have imported the dependencies, in order to start using the Hackle SDK you must initialize the SDK. This step allows you to get the information needed for SDK integration from the Hackle Server and store it in the SDK.

You need to pass the SDK key to createInstance() to create a HackleReactSDKClient and then pass this to the HackleProvider which wraps the React application.

Communication for data synchronization with the Hackle server is carried out in the application initialization stage. Typically, this takes only a few milliseconds. Rendering begins immediately after the synchronization is complete.

📘

SDK Integration for Next.js / Gatsby

Hackle React SDK does not support SSR (server-side rendering).
When conducting SDK integration with the Next.js / Gatsby environments, you can use the following code appropriate for each environment or language by clicking the tab appropriate for each environment from the code tab below.

If you currently use the React 18 version of Next.js, some features may not work.

import { createInstance, HackleProvider } from "@hackler/react-sdk";

// Enter the SDK Key in the YOUR_BROWSER_SDK_KEY.
const hackleClient = createInstance("YOUR_BROWSER_SDK_KEY")

ReactDOM.render(
  <HackleProvider hackleClient={hackleClient}>
    <YourApp />
  </HackleProvider>,
  document.getElementById('root')
);
import {createInstance, HackleProvider} from "@hackler/react-sdk";

function MyApp({Component, pageProps}) {
    let hackleClient
    if (process.browser) {
        // Enter the SDK Key in the YOUR_BROWSER_SDK_KEY.
        hackleClient = createInstance("YOUR_BROWSER_SDK_KEY")
    }

    return (
        hackleClient ? <HackleProvider hackleClient={hackleClient}>
            <Component {...pageProps} />
        </HackleProvider> : <Component {...pageProps} />
    )
}

export default MyApp
import {createInstance, HackleProvider} from "@hackler/react-sdk";

function App() {
    const isSSR = typeof window === "undefined"
    let hackleClient
    if (!isSSR) {
        // Enter the SDK Key in the YOUR_BROWSER_SDK_KEY.
        hackleClient = createInstance("YOUR_BROWSER_SDK_KEY")
    }

    return (
        hackleClient ? <HackleProvider hackleClient={hackleClient}>
            <YourApp />
        </HackleProvider> : <YourApp />
    )
}

export default App

📘

(Optional) You can add different configuration settings to the createInstance() method.

By adding different settings, you will be able to customize some of the functions of SDK. Please refer to Step 2-1: Customize SDK Behavior for more information.

Step 2-1: Configuration

During the SDK Initialization stage, you can customize and add different configuration settings to customizable keys. Refer to the example below.

import { createInstance, HackleProvider } from "@hackler/react-sdk";

// Enter the SDK Key in the YOUR_BROWSER_SDK_KEY.
// Set your desired values for debug, auto_track_page_view. 
const hackleClient = createInstance("YOUR_BROWSER_SDK_KEY", { debug: false, auto_track_page_view: true })

ReactDOM.render(
  <HackleProvider hackleClient={hackleClient}>
    <YourApp />
  </HackleProvider>,
  document.getElementById('root')
);
import {createInstance, HackleProvider} from "@hackler/react-sdk";

function MyApp({Component, pageProps}) {
    let hackleClient
    if (process.browser) {
        // Enter the SDK Key in the YOUR_BROWSER_SDK_KEY.
        // Set your desired values for debug, auto_track_page_view. 
        hackleClient = createInstance("YOUR_BROWSER_SDK_KEY", { debug: false, auto_track_page_view: true })
    }

    return (
        hackleClient ? <HackleProvider hackleClient={hackleClient}>
            <Component {...pageProps} />
        </HackleProvider> : <Component {...pageProps} />
    )
}

export default MyApp

The configuration keys above have the following functions.

Configuration Key

Function Description

Default Value

debug

Debug logs for all functions can be viewed from the the console.

false

auto_track_page_view

Automatically tracks and collects all web page traffic or navigation within.
(React SDK version 1.2.0 or later)

true

🚧

More about auto_track_page_view

  1. Irrespective of the unique auto_track_page_view setup, the properties provided by Hackle are still collected during Data Segmentation Analysis.
  2. If you change the auto_track_page_view from true to false, you cannot collect URL data when analyzing users with Funnel Analysis.

Did this page help you?