xenon-view-sdk

v0.1.37

Published

25 days ago

Javascript access to Xenon View.

Downloads

271

0High
0Medium
0Low

lwoydziak

xenonview sdk

xenon-view-sdk

The Xenon View JavaScript SDK is the JavaScript SDK to interact with XenonView.

Table of contents:

What's New

v0.1.37 - fix bug restoring journeys after comms failure
v0.1.36 - introduce startVariant to clear previous and start with this one
v0.1.35 - introduce addVariant to not clear previous
v0.1.34 - autoattribution doesn't add null for random query param.
v0.1.33 - autoattribution doesn't clear previous variants
v0.1.32 - send data even if page recently was closed
v0.1.31 - add lead unattributed and auto attribution for that
v0.1.29 - stop double counting attribution
v0.1.28 - method for adding url to every event
v0.1.27 - auto attribution discovery
v0.1.26 - init calls failure callback when API Key invalid
v0.1.25 - Fix promise crash post api call
v0.1.24 - Fix shopify window undefined issue
v0.1.23 - Support shopify sandbox session/local storage
v0.1.22 - Align typescript definitions correctly and fix Promise fault.
v0.1.21 - Allow for sampling with high volume sites.
v0.1.20 - Page Load Speed call added
v0.1.19 - watchdogs fully enabled
v0.1.18 - fix bug where id is deleted mid-stride
v0.1.17 - heartbeats + watchdogs for ecom
v0.1.16 - purchased -> purchase, purchaseCanceled -> purchaseCancel
v0.1.15 - checkedOut -> checkOut
v0.1.14.1 - Next.js pages router install issue solution in README
v0.1.14 - Added leadAttribution outcome
v0.1.13 - React JS SDK Errors are not being rethrown - fixed
v0.1.12 - Readme updates
v0.1.11 - Fix: typescript export definitions for useXenon
v0.1.10 - Added: typescript definitions for useXenon
v0.1.9 - Added: Term length as well and changed value to price for correctness
v0.1.8 - Added: Downsell, Ad, Content Archive, Subscription Pause and included price for all subscriptions
v0.1.7 - Nextjs support
v0.1.6 - include minified
v0.1.5 - Rename tag to variant
v0.1.4 - 0.1 typescript support
v0.1.3 - Readme update
v0.1.2 - typo fixed
v0.1.1 - Install via HTML as plain JavaScript
v0.1.0 - SDK redesign

Introduction

Everyone should have access to world-class customer telemetry.

You should be able to identify the most pressing problems affecting your business quickly. You should be able to determine if messaging or pricing, or technical challenges are causing friction for your customers. You should be able to answer questions like:

Is my paywall wording or the price of my subscriptions causing my customers to subscribe less?
Is my website performance or my application performance driving retention?
Is purchasing a specific product or the product portfolio driving referrals?

With the correct approach to instrumentation coupled with AI-enhanced analytics, you can quickly answer these questions and much more.

Get Started With The Following Steps:

The Xenon View SDK can be used in your application to provide a new level of customer telemetry. You'll need to embed the instrumentation into your website/application via this SDK.

Instrumentation will vary based on your use case; are you offering a service/subscription (SaaS) or selling products (Ecom)?

In a nutshell, the steps to get started are as follows:

Identify Business Outcomes and Customer Experience Milestones leading to those Outcomes.
Instrument the Outcomes/Milestones.
Analyze the results.

Step 1 - Business Outcomes

Regardless of your business model, your first step will be identifying your desired business outcomes.

Example - Service/Subscription/SaaS:

Lead Capture
Account Signup
Initial Subscription
Renewed Subscription
Upsold Subscription
Referral

Example - Ecom:

Place the product in the cart
Checkout
Upsold
Purchase

Step 2 - Customer Experience Milestones

For each Business Outcome, identify potential customer journey milestones leading up to that business outcome.

Example - Service/Subscription/SaaS for Lead Capture:

View informational content
Asks question in the forum
Views FAQs
Views HowTo
Requests info product

Example - Ecom for Place product in cart :

Search for product information
Learns about product
Read reviews

Step 3 - Enumerate Technical Stack

Next, you will want to figure out which SDK to use. We have some of the most popular languages covered.

Start by listing the technologies involved and what languages your company uses. For example:

Front end - UI (Javascript - react)
Back end - API server (Java)
Mobile app - iPhone (Swift)
Mobile app - Android (Android Java)

Next, figure out how your outcomes spread across those technologies. Below are pointers to our currently supported languages:

Finally, continue the steps below for each technology and outcome.

Step 4 - Installation

After you have done the prework of Step 1 and Step 2, you are ready to install Xenon View. Once installed, you'll need to initialize the SDK and get started instrumenting.

Step 5 - Instrument Business Outcomes

We have provided several SDK calls to shortcut your instrumentation and map to the outcomes identified in Step 1.
These calls will roll up into the associated Categories during analysis. These rollups allow you to view each Category in totality. As you view the categories, you can quickly identify issues (for example, if there are more Failures than Successes for a Category).

Service/Subscription/SaaS Related Outcome Calls (click on a call to see usage)

| Category | Success | Decline | |--------------------------|-------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------| | Lead Attribution | leadAttributed() | leadUnattributed() | | Lead Capture | leadCaptured() | leadCaptureDeclined() | | Account Signup | accountSignup() | accountSignupDeclined() | | Application Installation | applicationInstalled() | applicationNotInstalled() | | Initial Subscription | initialSubscription() | subscriptionDeclined() | | Subscription Renewed | subscriptionRenewed() | subscriptionCanceled() / subscriptionPaused() | | Subscription Upsell | subscriptionUpsold() | subscriptionUpsellDeclined() / subscriptionDownsell() | | Ad Clicked | adClicked() | adIgnored() | | Referral | referral() | referralDeclined() |

Ecom Related Outcome Calls (click on a call to see usage)

| Category | Success | Decline | |---------------------|---------------------------------------------------|-------------------------------------------------------------------------------------------| | Lead Attribution | leadAttributed() | leadUnattributed()](#ecom-lead-unattributed) | | Lead Capture | [leadCaptured()](#ecom-lead-capture) | [leadCaptureDeclined()](#ecom-lead-capture-fail) | | Account Signup | [accountSignup()](#ecom-account-signup) | [accountSignupDeclined()](#ecom-account-signup-fail) | | Add To Cart | [productAddedToCart()](#ecom-product-to-cart) | [productNotAddedToCart()](#ecom-product-to-cart-fail) | | Product Upsell | [upsold()](#ecom-upsell) | [upsellDismissed()](#ecom-upsell-fail) | | Checkout | [checkOut()](#ecom-checkout) | [checkoutCanceled()](#ecom-checkout-fail) / [productRemoved()](#ecom-checkout-remove) | | Purchase | [purchase()](#ecom-purchase) | [purchaseCancel()](#ecom-purchase-fail) | | Promise Fulfillment | [promiseFulfilled()](#ecom-promise-fulfillment) | [promiseUnfulfilled()](#ecom-promise-fulfillment-fail) | | Product Disposition | [productKept()](#ecom-product-outcome) | [productReturned()](#ecom-product-outcome-fail) | | Referral | [referral()](#ecom-referral) | [referralDeclined()`](#ecom-referral-fail) |

Step 6 - Instrument Customer Experience Milestones

Next, you will want to instrument your website/application/backend/service for the identified Customer Experience Milestones Step 2. We have provided several SDK calls to shortcut your instrumentation here as well.

During analysis, each Milestone is chained together with the proceeding and following Milestones. That chain terminates with an Outcome (described in Step 4). AI/ML is employed to determine Outcome correlation and predictability for the chains and individual Milestones. During the analysis step, you can view the correlation and predictability as well as the Milestone chains (called Customer Experiences in this guide).

Milestones break down into two types (click on a call to see usage):

| Features | Content | Performance | | --- | --- |-----------------------| | featureAttempted() | contentViewed() | pageLoadTime() | | featureFailed() | contentCreated() / contentEdited() | | featureCompleted() | contentDeleted() / contentArchived() | | | contentRequested()/contentSearched()|

Step 7 - Commit Points

Once instrumented, you'll want to select appropriate commit points. Committing will initiate the analysis on your behalf by Xenon View.

Step 8 (Optional) - Group Customer Experiences

All the customer journeys (milestones and outcomes) are anonymous by default. For example, if a Customer interacts with your brand in the following way:

Starts on your marketing website.
Downloads and uses an app.
Uses a feature requiring an API call.

Each of those journeys will be unconnected and not grouped.

To associate those journeys with each other, you can deanonymize the Customer. Deanonymizing will allow for a deeper analysis of a particular user.

Deanonymizing is optional. Basic matching of the customer journey with outcomes is valuable by itself. Deanonymizing will add increased insight as it connects Customer Experiences across devices.

Step 9 - Analysis

Once you have released your instrumented code, you can head to XenonView to view the analytics.

Step 10 - Perform Experiments

There are multiple ways you can experiment using XenonView. We"ll focus here on three of the most common: time, platform, and variant based cohorts.

Time-based cohorts

Each Outcome and Milestone is timestamped. You can use this during the analysis phase to compare timeframes. A typical example is making a feature change. Knowing when the feature went to production, you can filter in the XenonView UI based on the timeframe before and the timeframe after to observe the results.

Variant-based cohorts

You can identify a journey collection as an experiment before collecting data. This will allow you to run A/B testing-type experiments (of course not limited to two). As an example, let"s say you have two alternate content/feature variants and you have a way to direct half of the users to Variant A and the other half to Variant B. You can name each variant before the section of code that performs that journey. After collecting the data, you can filter in the XenonView UI based on each variant to observe the results.

Platform-based cohorts

You can Platform any journey collection before collecting data. This will allow you to experiment against different platforms:

Operating System Name
Operating System version
Device model (Pixel, iPhone 14, Docker Container, Linux VM, Dell Server, etc.)
A software version of your application.

As an example, let's say you have an iPhone and Android mobile application and you want to see if an outcome is more successful on one device verse the other. You can platform before the section of code that performs that flow. After collecting the data, you can filter in the XenonView UI based on each platform to observe the results.

Detailed Usage

The following section gives detailed usage instructions and descriptions. It provides code examples for each of the calls.

Installation

Install React/Next.Js/Angular (or other JS framework):

You can install the Xenon View SDK from npm:

Via npm:

npm install xenon-view-sdk

Via yarn:

yarn add xenon-view-sdk

Install with HTML:

You can install the Xenon View SDK as plain JavaScript via HTML. Below are a couple examples. More are provided for each function.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <script src="https://cdn.jsdelivr.net/gh/xenonview-com/[email protected]/dist/xenon_view_sdk.min.js"></script>
  <script>
    Xenon.init('<API KEY>')
  </script>
  <title>Sample</title>
</head>
<body>
<script>
  function exampleFeatureOccurred() {
    Xenon.featureAttempted("Example Feature")
    Xenon.commit()
  }

  function exampleReferralOutcomeOccurred() {
    Xenon.referral("From Button")
    Xenon.commit()
  }
</script>

<button onclick="exampleFeatureOccurred()">Example Feature</button>
<button onclick="exampleReferralOutcomeOccurred()">Example Referral Outcome</button>
</body>
</html>

Instantiation

The View SDK is a JS module you'll need to include in your application. After inclusion, you'll need to init the singleton object:

Framework example:

import Xenon from 'xenon-view-sdk';

// start by initializing Xenon View
Xenon.init('<API KEY>');

Nextjs example:

"use client";
import Image from 'next/image'
import {useXenon} from "xenon-view-sdk/useXenon";

export default function Home() {
  const Xenon = useXenon('<API KEY>');
  return (<main className="flex min-h-screen flex-col items-center justify-between p-24"/>);
}

HTML example:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <script src="https://cdn.jsdelivr.net/gh/xenonview-com/[email protected]/dist/xenon_view_sdk.min.js"></script>
  <script>
    Xenon.init('<API KEY>')
  </script>
  <title>Sample</title>
</head>

Of course, you'll have to make the following modifications to the above code:

Replace <API KEY> with your api key

Framework example:

import Xenon from 'xenon-view-sdk';

// start by initializing Xenon View
Xenon.init('<API KEY>', 'https://app.xenonview.com', (error) => console.log(error));

Service/Subscription/SaaS Related Business Outcomes

Lead Attributed

Use this call to track Lead Attribution (Google Ads, Facebook Ads, etc.) You can add a source and identifier string to the call to differentiate as follows:

`leadAttributed()`

Framework example:

import Xenon from 'xenon-view-sdk';

const source = 'Google Ad';
const identifier = 'Search';

// Successful Lead Attributed to Google Ad
Xenon.leadAttributed(source);
//...
// Successful Lead Attributed to Google Search Ad
Xenon.leadAttributed(source, identifier);

Nextjs example:

import {useXenon} from "xenon-view-sdk/useXenon";

export default function Home() {
  const Xenon = useXenon('<API KEY>');

  const source = 'Google Ad';
  const identifier = 'Search';

  // Successful Lead Attributed to Google Ad
  Xenon.leadAttributed(source);
  //...
  // Successful Lead Attributed to Google Search Ad
  Xenon.leadAttributed(source, identifier);

HTML example:

<script>
  const source = 'Google Ad'
  function leadAttributedOccurred() {
    Xenon.leadAttributed(source)
    Xenon.commit()
  }
</script>

<button onclick="leadAttributedOccurred()">Lead Attributed</button>

Lead Unattributed

Use this call to track Lead Attribution when unknown.

`leadUnattributed()`

Framework example:

import Xenon from 'xenon-view-sdk';
// Lead Unattributed
Xenon.leadUnattributed();

Nextjs example:

import {useXenon} from "xenon-view-sdk/useXenon";

export default function Home() {
  const Xenon = useXenon('<API KEY>');
  // Lead Unattributed
  Xenon.leadUnattributed();

HTML example:

<script>
  function leadUnattributedOccurred() {
    Xenon.leadUnattributed()
    Xenon.commit()
  }
</script>

<button onclick="leadUnattributedOccurred()">Lead Unattributed</button>

Lead Capture

Use this call to track Lead Capture (emails, phone numbers, etc.) You can add a specifier string to the call to differentiate as follows:

`leadCaptured()`

Framework example:

import Xenon from 'xenon-view-sdk';

const emailSpecified = 'Email';
const phoneSpecified = 'Phone Number';

// Successful Lead Capture of an email
Xenon.leadCaptured(emailSpecified);
//...
// Successful Lead Capture of a phone number
Xenon.leadCaptured(phoneSpecified);

Nextjs example:

import {useXenon} from "xenon-view-sdk/useXenon";

export default function Home() {
  const Xenon = useXenon('<API KEY>');

  const emailSpecified = 'Email';
  const phoneSpecified = 'Phone Number';

  // Successful Lead Capture of an email
  Xenon.leadCaptured(emailSpecified);
  //...
  // Successful Lead Capture of a phone number
  Xenon.leadCaptured(phoneSpecified);

HTML example:

<script>
  const emailSpecified = 'Email'
  function leadCapturedOccurred() {
    Xenon.leadCaptured(emailSpecified)
    Xenon.commit()
  }
</script>

<button onclick="leadCapturedOccurred()">Lead Capture</button>

`leadCaptureDeclined()`

Framework example:

import Xenon from 'xenon-view-sdk';

const emailSpecified = 'Email';
const phoneSpecified = 'Phone Number'; 

// Unsuccessful Lead Capture of an email
Xenon.leadCaptureDeclined(emailSpecified);
// ...
// Unsuccessful Lead Capture of a phone number
Xenon.leadCaptureDeclined(phoneSpecified);

Nextjs example:

import {useXenon} from "xenon-view-sdk/useXenon";

export default function Home() {
  const Xenon = useXenon('<API KEY>');

  const emailSpecified = 'Email';
  const phoneSpecified = 'Phone Number'; 
  
  // Unsuccessful Lead Capture of an email
  Xenon.leadCaptureDeclined(emailSpecified);
  // ...
  // Unsuccessful Lead Capture of a phone number
  Xenon.leadCaptureDeclined(phoneSpecified);

HTML example:

<script>
  const emailSpecified = 'Email'
  function leadCaptureDeclinedOccurred() {
    Xenon.leadCaptureDeclined(emailSpecified)
    Xenon.commit()
  }
</script>

<button onclick="leadCaptureDeclinedOccurred()">Lead Capture Declined</button>

Account Signup

Use this call to track when customers signup for an account. You can add a specifier string to the call to differentiate as follows:

`accountSignup()`

Framework example:

import Xenon from 'xenon-view-sdk';

const viaFacebook = 'Facebook';
const viaGoogle = 'Facebook';
const viaEmail = 'Email';

// Successful Account Signup with Facebook
Xenon.accountSignup(viaFacebook);
// ...
// Successful Account Signup with Google
Xenon.accountSignup(viaGoogle);
// ...
// Successful Account Signup with an Email
Xenon.accountSignup(viaEmail);

Nextjs example:

import {useXenon} from "xenon-view-sdk/useXenon";

export default function Home() {
  const Xenon = useXenon('<API KEY>');

  const viaFacebook = 'Facebook';
  const viaGoogle = 'Facebook';
  const viaEmail = 'Email';
  
  // Successful Account Signup with Facebook
  Xenon.accountSignup(viaFacebook);
  // ...
  // Successful Account Signup with Google
  Xenon.accountSignup(viaGoogle);
  // ...
  // Successful Account Signup with an Email
  Xenon.accountSignup(viaEmail);

HTML example:

<script>
  const viaFacebook = 'Facebook'
  function accountSignupOccurred() {
    Xenon.accountSignup(viaFacebook)
    Xenon.commit()
  }
</script>

<button onclick="accountSignupOccurred()">Account Signup</button>

`accountSignupDeclined()`

Framework example:

import Xenon from 'xenon-view-sdk';

const viaFacebook = 'Facebook';
const viaGoogle = 'Facebook';
const viaEmail = 'Email';

// Unsuccessful Account Signup with Facebook
Xenon.accountSignupDeclined(viaFacebook);
// ...
// Unsuccessful Account Signup with Google
Xenon.accountSignupDeclined(viaGoogle);
// ...
// Unsuccessful Account Signup with an Email
Xenon.accountSignupDeclined(viaEmail);

Nextjs example:

import {useXenon} from "xenon-view-sdk/useXenon";

export default function Home() {
  const Xenon = useXenon('<API KEY>');

  const viaFacebook = 'Facebook';
  const viaGoogle = 'Facebook';
  const viaEmail = 'Email';
  
  // Unsuccessful Account Signup with Facebook
  Xenon.accountSignupDeclined(viaFacebook);
  // ...
  // Unsuccessful Account Signup with Google
  Xenon.accountSignupDeclined(viaGoogle);
  // ...
  // Unsuccessful Account Signup with an Email
  Xenon.accountSignupDeclined(viaEmail);

HTML example:

<script>
  const viaFacebook = 'Facebook'
  function accountSignupDeclinedOccurred() {
    Xenon.accountSignupDeclined(viaFacebook)
    Xenon.commit()
  }
</script>

<button onclick="accountSignupDeclinedOccurred()">Account Signup Decline</button>

Application Installation

Use this call to track when customers install your application.

`applicationInstalled()`

Framework example:

import Xenon from 'xenon-view-sdk';

// Successful Application Installation
Xenon.applicationInstalled();

Nextjs example:

import {useXenon} from "xenon-view-sdk/useXenon";

export default function Home() {
  const Xenon = useXenon('<API KEY>');
  
  // Successful Application Installation
  Xenon.applicationInstalled();

HTML example:

<script>
  function applicationInstalledOccurred() {
    Xenon.applicationInstalled()
    Xenon.commit()
  }
</script>

<button onclick="applicationInstalledOccurred()">Install Application</button>

`applicationNotInstalled()`

Framework example:

import Xenon from 'xenon-view-sdk';

// Unsuccessful or not completed Application Installation
Xenon.applicationNotInstalled();

Nextjs example:

import {useXenon} from "xenon-view-sdk/useXenon";

export default function Home() {
  const Xenon = useXenon('<API KEY>');

  // Unsuccessful or not completed Application Installation
  Xenon.applicationNotInstalled();

HTML example:

<script>
  function applicationNotInstalledOccurred() {
    Xenon.applicationNotInstalled()
    Xenon.commit()
  }
</script>

<button onclick="applicationNotInstalledOccurred()">Application Not Installed</button>

Initial Subscription

Use this call to track when customers initially subscribe. You can add a specifier string to the call to differentiate as follows:

`initialSubscription()`

Framework example:

import Xenon from 'xenon-view-sdk';

const tierSilver = 'Silver Monthly';
const tierGold = 'Gold';
const tierPlatium = 'Platium';
const annualSilver = 'Silver Annual';
const method = 'Stripe'; // optional
const term = '30d'; //optional
const price = '$25'; //optional

// Successful subscription of the lowest tier with Stripe
Xenon.initialSubscription(tierSilver, method);

// Successful subscription of the lowest tier with Stripe for $25 for 30days
Xenon.initialSubscription(tierSilver, method, price, term);
// ...
// Successful subscription of the middle tier
Xenon.initialSubscription(tierGold);
// ...
// Successful subscription to the top tier
Xenon.initialSubscription(tierPlatium);
// ...
// Successful subscription of an annual period
Xenon.initialSubscription(annualSilver);

Nextjs example:

import {useXenon} from "xenon-view-sdk/useXenon";

export default function Home() {
  const Xenon = useXenon('<API KEY>');
  
  const tierSilver = 'Silver Monthly';
  const tierGold = 'Gold';
  const tierPlatium = 'Platium';
  const annualSilver = 'Silver Annual';
  const method = 'Stripe'; // optional
  const term = '30d'; //optional
  const price = '$25'; //optional


  // Successful subscription of the lowest tier with Stripe
  Xenon.initialSubscription(tierSilver, method);

  // Successful subscription of the lowest tier with Stripe for $25
  Xenon.initialSubscription(tierSilver, method, price, term);
  // ...
  // Successful subscription of the middle tier
  Xenon.initialSubscription(tierGold);
  // ...
  // Successful subscription to the top tier
  Xenon.initialSubscription(tierPlatium);
  // ...
  // Successful subscription of an annual period
  Xenon.initialSubscription(annualSilver);

HTML example:

<script>
  const annualSilver = 'Silver Annual'
  const method = 'Stripe'
  const price = '$25'
  const term = '30d'
  function initialSubscriptionOccurred() {
    Xenon.initialSubscription(annualSilver, method, price, term)
    Xenon.commit()
  }
</script>

<button onclick="initialSubscriptionOccurred()">Subscribe</button>

`subscriptionDeclined()`

Framework example:

import Xenon from 'xenon-view-sdk';

const tierSilver = 'Silver Monthly';
const tierGold = 'Gold';
const tierPlatium = 'Platium';
const annualSilver = 'Silver Annual';
const method = 'Stripe'; // optional
const term = '30d'; //optional
const price = '$25'; //optional

// Unsuccessful subscription of the lowest tier
Xenon.subscriptionDeclined(tierSilver);
// ...
// Unsuccessful subscription of the middle tier
Xenon.subscriptionDeclined(tierGold);
// ...
// Unsuccessful subscription to the top tier
Xenon.subscriptionDeclined(tierPlatium);
// ...
// Unsuccessful subscription of an annual period
Xenon.subscriptionDeclined(annualSilver, method);

// Unsuccessful subscription of an annual period for $25 for 30dys
Xenon.subscriptionDeclined(annualSilver, method, price, term);

Nextjs example:

import {useXenon} from "xenon-view-sdk/useXenon";

export default function Home() {
  const Xenon = useXenon('<API KEY>');

  const tierSilver = 'Silver Monthly';
  const tierGold = 'Gold';
  const tierPlatium = 'Platium';
  const annualSilver = 'Silver Annual';
  const method = 'Stripe'; // optional
  const price = '$25'; // optional
  const term = '30d'; //optional
  
  // Unsuccessful subscription of the lowest tier
  Xenon.subscriptionDeclined(tierSilver);
  // ...
  // Unsuccessful subscription of the middle tier
  Xenon.subscriptionDeclined(tierGold);
  // ...
  // Unsuccessful subscription to the top tier
  Xenon.subscriptionDeclined(tierPlatium);
  // ...
  // Unsuccessful subscription of an annual period
  Xenon.subscriptionDeclined(annualSilver, method);

  // Unsuccessful subscription of an annual period for $25 for 30days
  Xenon.subscriptionDeclined(annualSilver, method, price, term);

HTML example:

<script>
  const annualSilver = 'Silver Annual'
  const method = 'Stripe'
  const price = '$25'
  const term = '30d'
  function subscriptionDeclinedOccurred() {
    Xenon.subscriptionDeclined(annualSilver, method, price, term)
    Xenon.commit()
  }
</script>

<button onclick="subscriptionDeclinedOccurred()">Don't Subscribe</button>

Subscription Renewal

Use this call to track when customers renew. You can add a specifier string to the call to differentiate as follows:

`subscriptionRenewed()`

Framework example:

import Xenon from 'xenon-view-sdk';

const tierSilver = 'Silver Monthly';
const tierGold = 'Gold';
const tierPlatium = 'Platium';
const annualSilver = 'Silver Annual';
const method = 'Stripe'; //optional
const price = '$25'; //optional
const term = '30d'; //optional

// Successful renewal of the lowest tier with Stripe
Xenon.subscriptionRenewed(tierSilver, method);

// Successful renewal of the lowest tier with Stripe for $25 for 30days
Xenon.subscriptionRenewed(tierSilver, method, price, term);
// ...
// Successful renewal of the middle tier
Xenon.subscriptionRenewed(tierGold);
// ...
// Successful renewal of the top tier
Xenon.subscriptionRenewed(tierPlatium);
// ...
// Successful renewal of an annual period
Xenon.subscriptionRenewed(annualSilver);

Nextjs example:

import {useXenon} from "xenon-view-sdk/useXenon";

export default function Home() {
  const Xenon = useXenon('<API KEY>');

  const tierSilver = 'Silver Monthly';
  const tierGold = 'Gold';
  const tierPlatium = 'Platium';
  const annualSilver = 'Silver Annual';
  const method = 'Stripe'; //optional
  const price = '$25'; //optional
  const term = '30d'; //optional
  
  // Successful renewal of the lowest tier with Stripe
  Xenon.subscriptionRenewed(tierSilver, method);

  // Successful renewal of the lowest tier with Stripe for $25 for 30days
  Xenon.subscriptionRenewed(annualSilver, method, price, term);
  // ...
  // Successful renewal of the middle tier
  Xenon.subscriptionRenewed(tierGold);
  // ...
  // Successful renewal of the top tier
  Xenon.subscriptionRenewed(tierPlatium);
  // ...
  // Successful renewal of an annual period
  Xenon.subscriptionRenewed(annualSilver);

HTML example:

<script>
  const annualSilver = 'Silver Annual'
  const method = 'Stripe'
  const price = '$25'
  const term = '30d'
  function subscriptionRenewedOccurred() {
    Xenon.subscriptionRenewed(annualSilver, method, price, term)
    Xenon.commit()
  }
</script>

<button onclick="subscriptionRenewedOccurred()">Renew Subscription</button>

`subscriptionCanceled()`

Framework example:

import Xenon from 'xenon-view-sdk';

const tierSilver = 'Silver Monthly';
const tierGold = 'Gold';
const tierPlatium = 'Platium';
const annualSilver = 'Silver Annual';
const method = 'Stripe'; //optional
const price = '$25'; //optional
const term = '30d'; //optional

// Canceled subscription of the lowest tier
Xenon.subscriptionCanceled(tierSilver);
// ...
// Canceled subscription of the middle tier
Xenon.subscriptionCanceled(tierGold);
// ...
// Canceled subscription of the top tier
Xenon.subscriptionCanceled(tierPlatium);
// ...
// Canceled subscription of an annual period with Stripe
Xenon.subscriptionCanceled(annualSilver, method);

// Canceled subscription of an annual period with Stripe for $25 for 30days
Xenon.subscriptionCanceled(annualSilver, method, price, term);

Nextjs example:

import {useXenon} from "xenon-view-sdk/useXenon";

export default function Home() {
  const Xenon = useXenon('<API KEY>');

  const tierSilver = 'Silver Monthly';
  const tierGold = 'Gold';
  const tierPlatium = 'Platium';
  const annualSilver = 'Silver Annual';
  const method = 'Stripe'; //optional
  const price = '$25'; //optional
  const term = '30d'; //optional


  // Canceled subscription of the lowest tier
  Xenon.subscriptionCanceled(tierSilver);
  // ...
  // Canceled subscription of the middle tier
  Xenon.subscriptionCanceled(tierGold);
  // ...
  // Canceled subscription of the top tier
  Xenon.subscriptionCanceled(tierPlatium);
  // ...
  // Canceled subscription of an annual period with Stripe for $25 for 30days
  Xenon.subscriptionCanceled(annualSilver, method, price, term);

HTML example:

<script>
  const annualSilver = 'Silver Annual'
  const method = 'Stripe'
  const price = '$25'
  const term = '30d'
  function subscriptionCanceledOccurred() {
    Xenon.subscriptionCanceled(annualSilver, method, price, term)
    Xenon.commit()
  }
</script>

<button onclick="subscriptionCanceledOccurred()">Cancel Subscription</button>

`subscriptionPaused()`

Framework example:

import Xenon from 'xenon-view-sdk';

const tierSilver = 'Silver Monthly';
const tierGold = 'Gold';
const tierPlatium = 'Platium';
const annualSilver = 'Silver Annual';
const method = 'Stripe'; //optional
const price = '$25'; //optional
const term = '30d'; //optional

// Paused subscription of the lowest tier
Xenon.subscriptionPaused(tierSilver);
// ...
// Paused subscription of the middle tier
Xenon.subscriptionPaused(tierGold);
// ...
// Paused subscription of the top tier
Xenon.subscriptionPaused(tierPlatium);
// ...
// Paused subscription of an annual period with Stripe
Xenon.subscriptionPaused(annualSilver, method);

// Paused subscription of an annual period with Stripe for $25 for 30days
Xenon.subscriptionPaused(annualSilver, method, price, term);

Nextjs example:

import {useXenon} from "xenon-view-sdk/useXenon";

export default function Home() {
  const Xenon = useXenon('<API KEY>');

  const tierSilver = 'Silver Monthly';
  const tierGold = 'Gold';
  const tierPlatium = 'Platium';
  const annualSilver = 'Silver Annual';
  const method = 'Stripe'; //optional
  const price = '$25'; //optional
  const term = '30d'; //optional
  
  // Paused subscription of the lowest tier
  Xenon.subscriptionPaused(tierSilver);
  // ...
  // Paused subscription of the middle tier
  Xenon.subscriptionPaused(tierGold);
  // ...
  // Paused subscription of the top tier
  Xenon.subscriptionPaused(tierPlatium);
  // ...
  // Paused subscription of an annual period with Stripe
  Xenon.subscriptionPaused(annualSilver, method);

  // Paused subscription of an annual period with Stripe for $25
  Xenon.subscriptionPaused(annualSilver, method, price, term);

HTML example:

<script>
  const annualSilver = 'Silver Annual'
  const method = 'Stripe'
  const price = '$25'
  const term = '30d'
  function subscriptionPausedOccurred() {
    Xenon.subscriptionPaused(annualSilver, method, price, term)
    Xenon.commit()
  }
</script>

<button onclick="subscriptionPausedOccurred()">Pause Subscription</button>

Subscription Upsold

Use this call to track when a Customer upgrades their subscription.
You can add a specifier string to the call to differentiate as follows:

`subscriptionUpsold()`

Framework example:

import Xenon from 'xenon-view-sdk';

const tierGold = 'Gold Monthly';
const tierPlatium = 'Platium';
const annualGold = 'Gold Annual';
const method = 'Stripe'; // optional
const price = '$25'; //optional
const term = '30d'; //optional


// Assume already subscribed to Silver

// Successful upsell of the middle tier with Stripe
Xenon.subscriptionUpsold(tierGold, method);

// Successful upsell of the middle tier with Stripe for $25 for 30days
Xenon.subscriptionUpsold(tierGold, method, price, term);
// ...
// Successful upsell of the top tier
Xenon.subscriptionUpsold(tierPlatium);
// ...
// Successful upsell of middle tier - annual period
Xenon.subscriptionUpsold(annualGold);

Nextjs example:

import {useXenon} from "xenon-view-sdk/useXenon";

export default function Home() {
  const Xenon = useXenon('<API KEY>');
  
  const tierGold = 'Gold Monthly';
  const tierPlatium = 'Platium';
  const annualGold = 'Gold Annual';
  const method = 'Stripe'; // optional
  const price = '$25'; //optional
  const term = '30d'; //optional


  // Assume already subscribed to Silver
  
  // Successful upsell of the middle tier with Stripe
  Xenon.subscriptionUpsold(tierGold, method);

  // Successful upsell of the middle tier with Stripe for $25 for 30-days
  Xenon.subscriptionUpsold(tierGold, method, price, term);
  // ...
  // Successful upsell of the top tier
  Xenon.subscriptionUpsold(tierPlatium);
  // ...
  // Successful upsell of middle tier - annual period
  Xenon.subscriptionUpsold(annualGold);

HTML example:

<script>
  const annualSilver = 'Silver Annual'
  const method = 'Stripe'
  const price = '$25'
  const term = '30d'
  function subscriptionUpsoldOccurred() {
    Xenon.subscriptionUpsold(annualSilver, method, price, term)
    Xenon.commit()
  }
</script>

<button onclick="subscriptionUpsoldOccurred()">Upsell Subscription</button>

`subscriptionUpsellDeclined()`

Framework example:

import Xenon from 'xenon-view-sdk';

const tierGold = 'Gold Monthly';
const tierPlatium = 'Platium';
const annualGold = 'Gold Annual';
const method = 'Stripe'; //optional
const price = '$25'; //optional
const term = '30d'; //optional


// Assume already subscribed to Silver

// Rejected upsell of the middle tier
Xenon.subscriptionUpsellDeclined(tierGold);
// ...
// Rejected upsell of the top tier
Xenon.subscriptionUpsellDeclined(tierPlatium);
// ...
// Rejected upsell of middle tier - annual period with Stripe
Xenon.subscriptionUpsellDeclined(annualGold, method);

// Rejected upsell of middle tier - annual period with Stripe for $25
Xenon.subscriptionUpsellDeclined(annualGold, method, price, term);

Nextjs example:

import {useXenon} from "xenon-view-sdk/useXenon";

export default function Home() {
  const Xenon = useXenon('<API KEY>');

  const tierGold = 'Gold Monthly';
  const tierPlatium = 'Platium';
  const annualGold = 'Gold Annual';
  const method = 'Stripe'; //optional
  const price = '$25'; //optional
  const term = '30d'; //optional

  // Assume already subscribed to Silver
  
  // Rejected upsell of the middle tier
  Xenon.subscriptionUpsellDeclined(tierGold);
  // ...
  // Rejected upsell of the top tier
  Xenon.subscriptionUpsellDeclined(tierPlatium);
  // ...
  // Rejected upsell of middle tier - annual period with Stripe
  Xenon.subscriptionUpsellDeclined(annualGold, method);
  
  // Rejected upsell of middle tier - annual period with Stripe for $25 for 30days
  Xenon.subscriptionUpsellDeclined(annualGold, method, price, term);

HTML example:

<script>
  const annualSilver = 'Silver Annual'
  const method = 'Stripe'
  const price = '$25'
  const term = '30d'
  function subscriptionUpsellDeclinedOccurred() {
    Xenon.subscriptionUpsellDeclined(annualSilver, method, price, term)
    Xenon.commit()
  }
</script>

<button onclick="subscriptionUpsellDeclinedOccurred()">Decline Upsell</button>

`subscriptionDownsell()`

Framework example:

import Xenon from 'xenon-view-sdk';

const tierGold = 'Gold Monthly';
const tierPlatium = 'Platium';
const annualGold = 'Gold Annual';
const method = 'Stripe'; //optional
const price = '$15'; //optional
const term = '30d'; //optional

// Assume already subscribed to Silver

// Downsell to the middle tier
Xenon.subscriptionDownsell(tierGold);
// ...
// Downsell to middle tier - annual period with Stripe
Xenon.subscriptionDownsell(annualGold, method);

// Downsell to middle tier - annual period with Stripe for $15 for 30days
Xenon.subscriptionDownsell(annualGold, method, price, term);

Nextjs example:

import {useXenon} from "xenon-view-sdk/useXenon";

export default function Home() {
  const Xenon = useXenon('<API KEY>');

  const tierGold = 'Gold Monthly';
  const tierPlatium = 'Platium';
  const annualGold = 'Gold Annual';
  const method = 'Stripe'; //optional
  const price = '$15'; //optional
  const term = '30d'; //optional
  
  // Assume already subscribed to Silver
  
  // Downsell to the middle tier
  Xenon.subscriptionDownsell(tierGold);
  // ...
  // Downsell to middle tier - annual period with Stripe
  Xenon.subscriptionDownsell(annualGold, method);

  // Downsell to middle tier - annual period with Stripe for $15 for 30days
  Xenon.subscriptionDownsell(annualGold, method, price, term);

HTML example:

<script>
  const annualSilver = 'Silver Annual'
  const method = 'Stripe'
  const price = '$15'
  const term = '30d'
  function subscriptionDownsellOccurred() {
    Xenon.subscriptionDownsell(annualSilver, method, price, term)
    Xenon.commit()
  }
</script>

<button onclick="subscriptionDownsellOccurred()">Decrease Subscription</button>

Ad Clicked

Use this call to track when customers click on an Advertisement. You can add a specifier string to the call to differentiate as follows:

`adClicked()`

Framework example:

import Xenon from 'xenon-view-sdk';

const provider = 'AdMob';
const id = 'ID-1234'; // optional
const price = '$0.15'; //optional

// Click an Ad from AdMob identfied by ID-1234
Xenon.adClicked(provider, id);

// Click an Ad from AdMob identfied by ID-1234
Xenon.adClicked(provider, id, price);
// ...
// Click an Ad from AdMob
Xenon.adClicked(provider);

Nextjs example:

import {useXenon} from "xenon-view-sdk/useXenon";

export default function Home() {
  const Xenon = useXenon('<API KEY>');

  const provider = 'AdMob';
  const id = 'ID-1234'; // optional
  const price = '$0.15'; //optional

  // Click an Ad from AdMob identfied by ID-1234
  Xenon.adClicked(provider, id);

  // Click an Ad from AdMob identfied by ID-1234
  Xenon.adClicked(provider, id, price);
  // ...
  // Click an Ad from AdMob
  Xenon.adClicked(provider);

HTML example:

<script>
  const provider = 'AdMob'
  const id = 'ID-1234'
  const price = '$0.15'
  
  function adClickedOccurred() {
    Xenon.adClicked(provider, id, price)
    Xenon.commit()
  }
</script>

<button onclick="adClickedOccurred()">Ad Clicked</button>

`adIgnored()`

Framework example:

import Xenon from 'xenon-view-sdk';

const provider = 'AdMob';
const id = 'ID-1234'; // optional
const price = '$0.15'; //optional

// No action on an Ad from AdMob identfied by ID-1234
Xenon.adIgnored(provider, id);

// No action on an Ad from AdMob identfied by ID-1234 for $0.15
Xenon.adIgnored(provider, id, price);
// ...
// No action on an Ad from AdMob
Xenon.adIgnored(provider);

Nextjs example:

import {useXenon} from "xenon-view-sdk/useXenon";

export default function Home() {
  const Xenon = useXenon('<API KEY>');

  const provider = 'AdMob';
  const id = 'ID-1234'; // optional
  const price = '$0.15'; //optional

  // No action on an Ad from AdMob identfied by ID-1234
  Xenon.adIgnored(provider, id);

  // No action on an Ad from AdMob identfied by ID-1234 for $0.15
  Xenon.adIgnored(provider, id, price);
  // ...
  // No action on an Ad from AdMob
  Xenon.adIgnored(provider);

HTML example:

<script>
  const provider = 'AdMob'
  const id = 'ID-1234'
  const price = '$0.15'
  
  function adIgnored() {
    Xenon.adIgnored(provider, id, price)
    Xenon.commit()
  }
</script>

<button onclick="adIgnored()">Ignore Ad</button>

Referral

Use this call to track when customers refer someone to your offering. You can add a specifier string to the call to differentiate as follows:

`referral()`

Framework example:

import Xenon from 'xenon-view-sdk';

const kind = 'Share';
const detail = 'Review'; // optional

// Successful referral by sharing a review
Xenon.referral(kind, detail);
// -OR-
Xenon.referral(kind);

Nextjs example:

import {useXenon} from "xenon-view-sdk/useXenon";

export default function Home() {
  const Xenon = useXenon('<API KEY>');
  
  const kind = 'Share';
  const detail = 'Review'; // optional
  
  // Successful referral by sharing a review
  Xenon.referral(kind, detail);
  // -OR-
  Xenon.referral(kind);

HTML example:

<script>
  const kind = 'Share'
  function referralOccurred() {
    Xenon.referral(kind)
    Xenon.commit()
  }
</script>

<button onclick="referralOccurred()">Referral</button>

`referralDeclined()`

Framework example:

import Xenon from 'xenon-view-sdk';

const kind = 'Share';
const detail = 'Review'; // optional

//Customer declined referral 
Xenon.referralDeclined(kind, detail);
// -OR-
Xenon.referralDeclined(kind);

Nextjs example:

import {useXenon} from "xenon-view-sdk/useXenon";

export default function Home() {
  const Xenon = useXenon('<API KEY>');

  const kind = 'Share';
  const detail = 'Review'; // optional
  
  //Customer declined referral 
  Xenon.referralDeclined(kind, detail);
  // -OR-
  Xenon.referralDeclined(kind);

HTML example:

<script>
  const kind = 'Share'
  function referralDeclinedOccurred() {
    Xenon.referralDeclined(kind)
    Xenon.commit()
  }
</script>

<button onclick="referralDeclinedOccurred()">Decline Referral</button>

Ecommerce Related Outcomes

Lead Attributed

Use this call to track Lead Attribution (Google Ads, Facebook Ads, etc.) You can add a source and identifier string to the call to differentiate as follows:

`leadAttributed()`

Framework example:

import Xenon from 'xenon-view-sdk';

const source = 'Google Ad';
const identifier = 'Search';

// Successful Lead Attributed to Google Ad
Xenon.leadAttributed(source);
//...
// Successful Lead Attributed to Google Search Ad
Xenon.leadAttributed(source, identifier);

Nextjs example:

import {useXenon} from "xenon-view-sdk/useXenon";

export default function Home() {
  const Xenon = useXenon('<API KEY>');

  const source = 'Google Ad';
  const identifier = 'Search';

  // Successful Lead Attributed to Google Ad
  Xenon.leadAttributed(source);
  //...
  // Successful Lead Attributed to Google Search Ad
  Xenon.leadAttributed(source, identifier);

HTML example:

<script>
  const source = 'Google Ad'
  function leadAttributedOccurred() {
    Xenon.leadAttributed(source)
    Xenon.commit()
  }
</script>

<button onclick="leadAttributedOccurred()">Lead Attributed</button>

Lead Capture

Use this call to track Lead Capture (emails, phone numbers, etc.) You can add a specifier string to the call to differentiate as follows:

`leadCaptured()`

Framework example:

import Xenon from 'xenon-view-sdk';

const emailSpecified = 'Email';
const phoneSpecified = 'Phone Number';

// Successful Lead Capture of an email
Xenon.leadCaptured(emailSpecified);
// ...
// Successful Lead Capture of a phone number
Xenon.leadCaptured(phoneSpecified);

Nextjs example:

import {useXenon} from "xenon-view-sdk/useXenon";

export default function Home() {
  const Xenon = useXenon('<API KEY>');

  const emailSpecified = 'Email';
  const phoneSpecified = 'Phone Number';
  
  // Successful Lead Capture of an email
  Xenon.leadCaptured(emailSpecified);
  // ...
  // Successful Lead Capture of a phone number
  Xenon.leadCaptured(phoneSpecified);

HTML example:

<script>
  const emailSpecified = 'Email'
  function leadCapturedOccurred() {
    Xenon.leadCaptured(emailSpecified)
    Xenon.commit()
  }
</script>

<button onclick="leadCapturedOccurred()">Lead Capture</button>

`leadCaptureDeclined()`

Framework example:

import Xenon from 'xenon-view-sdk';

const emailSpecified = 'Email';
const phoneSpecified = 'Phone Number'; 

// Unsuccessful Lead Capture of an email
Xenon.leadCaptureDeclined(emailSpecified);
// ...
// Unsuccessful Lead Capture of a phone number
Xenon.leadCaptureDeclined(phoneSpecified);

Nextjs example:

import {useXenon} from "xenon-view-sdk/useXenon";

export default function Home() {
  const Xenon = useXenon('<API KEY>');

  const emailSpecified = 'Email';
  const phoneSpecified = 'Phone Number'; 
  
  // Unsuccessful Lead Capture of an email
  Xenon.leadCaptureDeclined(emailSpecified);
  // ...
  // Unsuccessful Lead Capture of a phone number
  Xenon.leadCaptureDeclined(phoneSpecified);

HTML example:

<script>
  const emailSpecified = 'Email'
  function leadCaptureDeclinedOccurred() {
    Xenon.leadCaptureDeclined(emailSpecified)
    Xenon.commit()
  }
</script>

<button onclick="leadCaptureDeclinedOccurred()">Decline Lead Capture</button>

Account Signup

Use this call to track when customers signup for an account. You can add a specifier string to the call to differentiate as follows:

`accountSignup()`

Framework example:

import Xenon from 'xenon-view-sdk';

const viaFacebook = 'Facebook';
const viaGoogle = 'Facebook';
const viaEmail = 'Email';

// Successful Account Signup with Facebook
Xenon.accountSignup(viaFacebook);
// ...
// Successful Account Signup with Google
Xenon.accountSignup(viaGoogle);
// ...
// Successful Account Signup with an Email
Xenon.accountSignup(viaEmail);

Nextjs example:

import {useXenon} from "xenon-view-sdk/useXenon";

export default function Home() {
  const Xenon = useXenon('<API KEY>');

  const viaFacebook = 'Facebook';
  const viaGoogle = 'Facebook';
  const viaEmail = 'Email';
  
  // Successful Account Signup with Facebook
  Xenon.accountSignup(viaFacebook);
  // ...
  // Successful Account Signup with Google
  Xenon.accountSignup(viaGoogle);
  // ...
  // Successful Account Signup with an Email
  Xenon.accountSignup(viaEmail);

HTML example:

<script>
  const viaFacebook = 'Facebook'
  function accountSignupOccurred() {
    Xenon.accountSignup(viaFacebook)
    Xenon.commit()
  }
</script>

<button onclick="accountSignupOccurred()">Account Signup</button>

`accountSignupDeclined()`

Framework example:

import Xenon from 'xenon-view-sdk';

const viaFacebook = 'Facebook';
const viaGoogle = 'Facebook';
const viaEmail = 'Email';

// Unsuccessful Account Signup with Facebook
Xenon.accountSignupDeclined(viaFacebook);
// ...
// Unsuccessful Account Signup with Google
Xenon.accountSignupDeclined(viaGoogle);
// ...
// Unsuccessful Account Signup with an Email
Xenon.accountSignupDeclined(viaEmail);

Nextjs example:

import {useXenon} from "xenon-view-sdk/useXenon";

export default function Home() {
  const Xenon = useXenon('<API KEY>');

  const viaFacebook = 'Facebook';
  const viaGoogle = 'Facebook';
  const viaEmail = 'Email';
  
  // Unsuccessful Account Signup with Facebook
  Xenon.accountSignupDeclined(viaFacebook);
  // ...
  // Unsuccessful Account Signup with Google
  Xenon.accountSignupDeclined(viaGoogle);
  // ...
  // Unsuccessful Account Signup with an Email
  Xenon.accountSignupDeclined(viaEmail);

HTML example:

<script>
  const viaFacebook = 'Facebook'
  function accountSignupDeclinedOccurred() {
    Xenon.accountSignupDeclined(viaFacebook)
    Xenon.commit()
  }
</script>

<button onclick="accountSignupDeclinedOccurred()">Decline Account Signup</button>

Add Product To Cart

Use this call to track when customers add a product to the cart. You can add a specifier string to the call to differentiate as follows:

`productAddedToCart()`

Framework example:

import Xenon from 'xenon-view-sdk';

const laptop = 'Dell XPS';
const keyboard = 'Apple Magic Keyboard';

// Successful adds a laptop to the cart
Xenon.productAddedToCart(laptop);
// ...
// Successful adds a keyboard to the cart
Xenon.productAddedToCart(keyboard);

Nextjs example:

import {useXenon} from "xenon-view-sdk/useXenon";

export default function Home() {
  const Xenon = useXenon('<API KEY>');
  
  const laptop = 'Dell XPS';
  const keyboard = 'Apple Magic Keyboard';
  
  // Successful adds a laptop to the cart
  Xenon.productAddedToCart(laptop);
  // ...
  // Successful adds a keyboard to the cart
  Xenon.productAddedToCart(keyboard);

HTML example:

<script>
  const laptop = 'Dell XPS'
  function productAddedToCartOccurred() {
    Xenon.productAddedToCart(laptop)
    Xenon.commit()
  }
</script>

<button onclick="productAddedToCartOccurred()">Add to cart</button>

`productNotAddedToCart()`

Framework example:

import Xenon from 'xenon-view-sdk';

const laptop = 'Dell XPS';
const keyboard = 'Apple Magic Keyboard';

// Doesn't add a laptop to the cart
Xenon.productNotAddedToCart(laptop);
// ...
// Doesn't add a keyboard to the cart
Xenon.productNotAddedToCart(keyboard);

Nextjs example:

import {useXenon} from "xenon-view-sdk/useXenon";

export default function Home() {
  const Xenon = useXenon('<API KEY>');

  const laptop = 'Dell XPS';
  const keyboard = 'Apple Magic Keyboard';
  
  // Doesn't add a laptop to the cart
  Xenon.productNotAddedToCart(laptop);
  // ...
  // Doesn't add a keyboard to the cart
  Xenon.productNotAddedToCart(keyboard);

HTML example:

<script>
  const laptop = 'Dell XPS'
  function productNotAddedToCartOccurred() {
    Xenon.productNotAddedToCart(laptop)
    Xenon.commit()
  }
</script>

<button onclick="productNotAddedToCartOccurred()">Remove from cart</button>

Upsold Additional Products

Use this call to track when you upsell additional product(s) to customers. You can add a specifier string to the call to differentiate as follows:

`upsold()`

Framework example:

import Xenon from 'xenon-view-sdk';

const laptop = 'Dell XPS';
const laptopPrice = '$1459'; //optional
const keyboard = 'Apple Magic Keyboard';
const keyboardPrice = '$139'; //optional

// upsold a laptop
Xenon.upsold(laptop, laptopPrice);
// ...
// upsold a keyboard
Xenon.upsold(keyboard, keyboardPrice);

Nextjs example:

import {useXenon} from "xenon-view-sdk/useXenon";

export default function Home() {
  const Xenon = useXenon('<API KEY>');

  const laptop = 'Dell XPS';
  const laptopPrice = '$1459'; //optional
  const keyboard = 'Apple Magic Keyboard';
  const keyboardPrice = '$139'; //optional

  // upsold a laptop
  Xenon.upsold(laptop, laptopPrice);
  // ...
  // upsold a keyboard
  Xenon.upsold(keyboard, keyboardPrice);

HTML example:

<script>
  const laptop = 'Dell XPS'
  const laptopPrice = '$1459'
  function upsoldOccurred() {
    Xenon.upsold(laptop, laptopPrice)
    Xenon.commit()
  }
</script>

<button onclick="upsoldOccurred()">Add extra item from cart</button>

`upsellDismissed()`

Framework example:

import Xenon from 'xenon-view-sdk';

const laptop = 'Dell XPS';
const keyboard = 'Apple Magic Keyboard';
const keyboardPrice = '$139'; //optional

// Doesn't add a laptop during upsell
Xenon.upsellDismissed(laptop);
// ...
// Doesn't add a keyboard during upsell
Xenon.upsellDismissed(keyboard, keyboardPrice);

Nextjs example:

import {useXenon} from "xenon-view-sdk/useXenon";

export default function Home() {
  const Xenon = useXenon('<API KEY>');

  const laptop = 'Dell XPS';
  const keyboard = 'Apple Magic Keyboard';
  const keyboardPrice = '$139'; //optional
  
  // Doesn't add a laptop during upsell
  Xenon.upsellDismissed(laptop);
  // ...
  // Doesn't add a keyboard during upsell
  Xenon.upsellDismissed(keyboard, keyboardPrice);

HTML example:

<script>
  const laptop = 'Dell XPS'
  const laptopPrice = '$1459'

  function upsellDismissedOccurred() {
    Xenon.upsellDismissed(laptop, laptopPrice)
    Xenon.commit()
  }
</script>

<button onclick="upsellDismissedOccurred()">Remove extra item from cart</button>

Customer Checks Out

Use this call to track when your Customer is checking out.

`checkOut()`

Framework example:

import Xenon from 'xenon-view-sdk';

// Successful Checkout
Xenon.checkOut();

Nextjs example:

import {useXenon} from "xenon-view-sdk/useXenon";

export default function Home() {
  const Xenon = useXenon('<API KEY>');

  // Successful Checkout
  Xenon.checkOut();

HTML example:

<script>
  function checkOutOccurred() {
    Xenon.checkOut()
    Xenon.commit()
  }
</script>

<button onclick="checkOutOccurred()">Checkout</button>

`checkoutCanceled()`

Framework example:

import Xenon from 'xenon-view-sdk';

//Customer cancels check out.
Xenon.checkoutCanceled();

Nextjs example:

import {useXenon} from "xenon-view-sdk/useXenon";

export default function Home() {
  const Xenon = useXenon('<API KEY>');

  //Customer cancels check out.
  Xenon.checkoutCanceled();

HTML example:

<script>
  function checkoutCanceledOccurred() {
    Xenon.checkoutCanceled()
    Xenon.commit()
  }
</script>

<button onclick="checkoutCanceledOccurred()">Cancel Checkout</button>

`productRemoved()`

Framework example:

import Xenon from 'xenon-view-sdk';

const laptop = 'Dell XPS';
const keyboard = 'Apple Magic Keyboard';

// Removes a laptop during checkout
Xenon.productRemoved(laptop);
// ...
// Removes a keyboard during checkout
Xenon.productRemoved(keyboard);

Nextjs example:

import {useXenon} from "xenon-view-sdk/useXenon";

export default function Home() {
  const Xenon = useXenon('<API KEY>');

  const laptop = 'Dell XPS';
  const keyboard = 'Apple Magic Keyboard';
  
  // Removes a laptop during checkout
  Xenon.productRemoved(laptop);
  // ...
  // Removes a keyboard during checkout
  Xenon.productRemoved(keyboard);

HTML example:

<script>
  const laptop = 'Dell XPS'
  function productRemovedOccurred() {
    Xenon.productRemoved(laptop)
    Xenon.commit()
  }
</script>

<button onclick="productRemovedOccurred()">Remove product</button>

Customer Completes Purchase

Use this call to track when your Customer completes a purchase.

`purchase()`

Framework example:

import Xenon from 'xenon-view-sdk';

const SKUs = '12345, 6789-b';
const price =

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

xenon-view-sdk

What's New

Introduction

Get Started With The Following Steps:

Step 1 - Business Outcomes

Step 2 - Customer Experience Milestones

Step 3 - Enumerate Technical Stack

Step 4 - Installation

Step 5 - Instrument Business Outcomes

Step 6 - Instrument Customer Experience Milestones

Step 7 - Commit Points

Step 8 (Optional) - Group Customer Experiences

Step 9 - Analysis

Step 10 - Perform Experiments

Time-based cohorts

Variant-based cohorts

Platform-based cohorts

Detailed Usage

Installation

Install React/Next.Js/Angular (or other JS framework):

Install with HTML:

Instantiation

Framework example:

Nextjs example:

HTML example:

Framework example:

Service/Subscription/SaaS Related Business Outcomes

Lead Attributed

leadAttributed()

Framework example:

Nextjs example:

HTML example:

Lead Unattributed

leadUnattributed()

Framework example:

Nextjs example:

HTML example:

Lead Capture

leadCaptured()

Framework example:

Nextjs example:

HTML example:

leadCaptureDeclined()

Framework example:

Nextjs example:

HTML example:

Account Signup

accountSignup()

Framework example:

Nextjs example:

HTML example:

accountSignupDeclined()

Framework example:

Nextjs example:

HTML example:

Application Installation

applicationInstalled()

Framework example:

Nextjs example:

HTML example:

applicationNotInstalled()

Framework example:

Nextjs example:

HTML example:

Initial Subscription

initialSubscription()

Framework example:

Nextjs example:

HTML example:

subscriptionDeclined()

Framework example:

Nextjs example:

HTML example:

Subscription Renewal

`leadAttributed()`

`leadUnattributed()`

`leadCaptured()`

`leadCaptureDeclined()`

`accountSignup()`

`accountSignupDeclined()`

`applicationInstalled()`

`applicationNotInstalled()`

`initialSubscription()`

`subscriptionDeclined()`

`subscriptionRenewed()`

`subscriptionCanceled()`

`subscriptionPaused()`

`subscriptionUpsold()`

`subscriptionUpsellDeclined()`

`subscriptionDownsell()`

`adClicked()`

`adIgnored()`

`referral()`