Skip to content

Web Apps

Initialization

In order to create ease for partners, we have divided the SDK into multiple modules. Each module represents a specific app niche that partners can use based on their app category. For this step, we will only focus on the core sdk

In order to use the SDK, Core is mandatory to include as it contains the elements regarding the basic app navigation and workflow including nudges. Moreover, all the modules require the core to be integrated in order to successfully log the events.

The easiest way to integrate Causal Foundry Web SDK in your project is using an NPM package. Add dependencies of the SDK in your package.json of your project.

    npm i @causalfoundry/js-sdk
    # or
    yarn @causalfoundry/js-sdk

OR

    "dependencies": {
        "@causalfoundry/js-sdk": "<version_number>"
    }

for version_number please head to npm package.

Causal Foundry SDK provides a mechanism to inject logs to the data analytics server. The overall functionality may be described as follows: whenever an event is logged, it is not immediately delivered. Instead, it is queued internally and sent to the server in batches, to save network bandwidth. If the network is down, the SDK is also able to store the events until it is back, or even store them in a permanent storage, like localStorage to manage the case where the user closes the application before the events are correctly delivered.

In your App.js,

    import {CfLog} from '@causalfoundry/js-sdk'

    // Init CF SDK
    CfLog.createSDKInstance(
        '<your-sdk-key>',
        {
          activateNudgeMechanism: true,
          selfManagedNudges: false
        }
    )

    // Nudge CTA listener, required for e-commerce applications
    CfLog.getSDKInstance().on(CfLogEvents.NudgeAction, (type, resource) => {
        if (type === CfLogEventType.Redirect) {
            // navigate to the product page for the `resource.id`
        } else if (type === CfLogEventType.AddToCart) {
            // Add the provided product Id as `resource.id` to the cart and redirect to the cart screen
        }
    })

    import {
    CfLog,
    IdentifyAction
} from '@causalfoundry/js-sdk'



const cflog = new CfLog('<your-sdk-key>', {activateNudgeMechanism: false})

// OR

const options = {
    activateNudgeMechanism: false
}

const cflog = new CfLog('<your-sdk-key>', options)



  • activateNudgeMechanism, indicates whether the SDK must receive and show nudges or not. When the SDK is embedded into a WebView and the native application already uses the Causal Foundry SDK, it is not needed to receive nudge also in the WebView, since they are already been received in the main application. Default is true.
  • selfManagedNudges, the SDK provides the flag to manage the nudges for the users, by default the SDK manages the nudges (is false) on its own but the partners have the ability to manage the nudges on each screen type. When turned on, the partner need to explicitly call the nudge screen type ref on the screens subject to show nudges.
  • defaultBlock, the SDK provides the function setCurrentBlock to set the block name of those events that does not belong to a specific module, like page or media events. Use this parameter defaultBlock to avoid calling setCurrentBlock in your different views if all of them belong to the same block.

Causal Foundry SDK automatically starts tracking user data (e.g., Upload/download speed, OS version, device IDs) and engagement with the basic setup above. This data can be stored on the device and uploaded in batches to reduce network and power usage, and to increase the likelihood of successful uploads while you can also upload the events as soon as they happen.

Each event can further be understood in the context of its attributes which includes details like time, upload/download speed, device details, locale, online/offline usage, screen time, interactions, and so on. This enables you to gain in-depth insights into user interactions across your app. You can also leverage this data to segment users, personalize messages and configure campaign targeting.


Next Steps -> Adding Core Events