Skip to main content

Web2App - Custom analytics integration guide

A guide on how to inject your tracking code, so you can capture detailed user interactions and send data to the preferred analytics service.

L
Written by Leanid Yuryeu
Updated this week

Contents:

Implementation Instructions

  1. Access the Integration Panel

    • Navigate to the Analytics field

    • Select Web2App project

    • Scroll down the page and select "Custom analytics

    • Click "Add"

  2. Insert Your Tracking Script

    • Place your JavaScript code in either <head> or <body> section

NOTE: The function window.customEventTracker is called for every tracked event.

Basic example:

<script>
window.customEventTracker = (event, args) => {
// Your tracking implementation
console.log('TRACK EVENT:', event, JSON.stringify(args));
};
</script>

All supported events

Start Onboarding - Onboarding started

Parameters:

  • onboardingName

  • webOnboardingName

  • projectName

  • projectId

  • schemaVersion

  • buildVersion *

  • versionId

  • onboardingId

  • webOnboardingId

AbTestLoaded


Parameters:

  • abTestId

  • abTestName

  • abTestVariantId

  • abTestVariantName

  • abTestVariantThreshold

ScreenDidAppear

Parameters:

  • screenId

  • screenName

ScreenDisappeared

Parameters:

  • screenId

  • screenName

  • nextScreenId (*)

  • userInputValue (*)

  • platformUserId (*)

  • stripeCustomerId (*)

  • sessionId (*)

SwitchedToNewScreenOnTimer

Parameters:

  • screenId

  • screenName

Navigation Actions

Events:

  • LeftNavbarButtonPressed

  • RightNavbarButtonPressed

  • CloseNavbarButtonPressed

  • FirstFooterButtonPressed

  • SecondFooterButtonPressed

  • PurchaseFooterButtonPressed

  • RestoreFooterLabelPressed

  • RestoreHeaderLabelPressed

Parameters:

  • screenId

  • screenName

FieldInputValueError — input validation error

Parameters:

  • screenId

  • value

UserUpdatedValue — user input updated

Parameters:

  • screenId

  • screenName

  • userInputValue

  • buttonTitle * — used if the input is a list/table

ProductSelected — product selected

Parameters:

  • screenId

  • screenName

  • productId

OnboardingFinished — onboarding finished

Parameters:

  • userInputValues

HookEvent — hook request sent

Parameters:

  • hook:

    • request:

      • input

      • init:

        • method

        • headers

        • body

HookEventResult — hook result received

Parameters:

  • hook:

    • response:

      • ok

      • status

      • json

HookEventError — hook failed

Parameters:

  • hook:

    • error

CustomScreenCallback — returned from custom screen

Parameters:

  • screenId

  • screenName

  • eventName (e.g. next, back, acceptCookie, declineCookie)

Payment and Stripe events

  • StripePaymentElementButtonPressed

  • StripePaymentElementConfirmButtonPressed

  • StripePaymentElementWidgetShown/Hidden


Parameters:

  • screenId

  • screenName

StripeCustomerCreated

Parameters:

  • customerId

  • email

  • platformUserId

StripeCheckoutSessionCreated

Parameters:

  • platformUserId

  • stripeCustomerId

  • sessionId

StripeCheckoutSessionSuccess / Cancel / RedirectError

Parameters:

  • sessionId

  • platformUserId *

  • stripeCustomerId *

  • error *

StripeExpressCheckoutError

Parameters:

  • error

StripePaymentElementError

Paremeters:

  • error

StripePaymentElementMethodSet

Parameters:

  • paymentMethod

StripePaymentIntentCreated

Parameters:

  • clientSecret

  • platformUserId

  • stripeCustomerId

StripePaymentIntentSuccess

Parameters:

  • paymentIntentId

StripeSetupIntentCreated

Parameters:

  • clientSecret

  • platformUserId

  • stripeCustomerId

StripeSetupIntentSuccess

Parameters:

  • setupIntentId

StripeSubscriptionCreated

Parameters:

  • subscriptionId

  • platformUserId

StripeSubscriptionSuccess

Parameters:

  • setupIntentId

StripeStartTrial

Parameters:

  • subscriptionId *

  • platformUserId *

  • setupIntentId *

  • sessionId *

StripeSubscribe

Parameters:

  • paymentIntentId *

  • setupIntentId *

  • subscriptionId *

  • platformUserId *

  • sessionId *

StripePurchase

Parameters:

  • paymentIntentId *

  • sessionId *

AcceptCookiesPressed / DeclineCookiesPressed

Parameters:

  • screenId

  • screenName


Example: tracking table cells and product selection

<script>
window.customEventTracker = (event, args) => {
if (event === 'UserUpdatedValue' && args.buttonTitle) {
window.customUserData = window.customUserData || {};
window.customUserData[args.screenId] = args.buttonTitle;
}






if (event === 'ProductSelected') {
window.customUserData = window.customUserData || {};
window.customUserData[args.screenId] = args.productId;
}



console.log('TRACK EVENT:', event, JSON.stringify(args));
};
</script>



Example of sending custom analytics events to your own backend using a POST request

<script>
window.customEventTracker = (event, args) => {
fetch('https://your-domain.com/api/track', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
event,
timestamp: new Date().toISOString(),
args
})
}).catch((error) => {
console.warn('Failed to send analytics event:', error);
});
};
</script>

Example: Tracking events in TikTok with custom mapping

<script>
window.TikTokEventMap = {
StripePurchase: 'Purchase',
StripeSubscribe: 'Subscribe',
StripeStartTrial: 'StartTrial',
StripeSetupIntentSuccess: 'AddPaymentInfo',
ProductSelected: 'AddToCart',
StripeCheckoutSessionCreated: 'InitiateCheckout',
StripeCustomerCreated: 'InitiateCheckout',
OnboardingFinished: 'Lead',
StartOnboarding: 'ViewContent',
};
function trackToTikTok(event, args) {
const mappedEvent = window.TikTokEventMap?.[event] || event;
if (typeof ttq === 'function') {
ttq.track(mappedEvent, args);
}
}
window.customEventTracker = (event, args) => {
trackToTikTok(event, args);
};
</script>
Did this answer your question?