xenon-view-sdk v0.1.26

xenon-view-sdk

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

Table of contents:

• What's New
• Introduction
• Steps To Get Started
  • Identify Business Outcomes
  • Identify Customer Experience Milestones
  • Enumerate Technical Stack
  • Installation
  • Instrument Business Outcomes
  • Instrument Customer Experience Milestones
  • Determine Commit Points
  • (Optional) Group Customer Journeys
  • Analysis
  • Perform Experiments
• Detailed Usage
  • Installation
  • Initialization
  • Service/Subscription/SaaS Business Outcomes
  • Ecommerce Business Outcomes
  • Customer Experience Milestones
    • Features Usage
    • Content Interaction
    • Performance
  • Commit Points
  • Heartbeats
    • Abandonment
  • Platforming
  • Experiments
  • Customer Experience Grouping
  • Other Considerations
    • (Optional) Error Handling
    • (Optional) Custom Customer Experience Milestones
    • (Optional) Journey Identification
• License
• FAQ-Next.Js

What's New

• 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: 1. Is my paywall wording or the price of my subscriptions causing my customers to subscribe less? 2. Is my website performance or my application performance driving retention? 3. 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.

back to top

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: 1. Identify Business Outcomes and Customer Experience Milestones leading to those Outcomes. 2. Instrument the Outcomes/Milestones. 3. 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: 1. Lead Capture 2. Account Signup 3. Initial Subscription 4. Renewed Subscription 5. Upsold Subscription 6. Referral

Example - Ecom: 1. Place the product in the cart 2. Checkout 3. Upsold 4. Purchase

:memo: Note: Each outcome has an associated success and failure.

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: 1. View informational content 2. Asks question in the forum 3. Views FAQs 4. Views HowTo 5. Requests info product

Example - Ecom for Place product in cart : 1. Search for product information 2. Learns about product 3. 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: 1. Front end - UI (Javascript - react) 2. Back end - API server (Java) 3. Mobile app - iPhone (Swift) 4. Mobile app - Android (Android Java)

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

• React
• Next.Js
• Angular
• HTML
• Plain JavaScript
• iPhone/iPad
• Mac
• Java
• Android Java
• Python

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)

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

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):

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: 1. Starts on your marketing website. 2. Downloads and uses an app. 3. 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.

back to top

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

back to top

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/view-js-sdk@v0.1.26/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>

back to top

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/view-js-sdk@v0.1.26/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

:memo: Note: If the API Key is invalid the init call will return false.

back to top

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 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()

:memo: Note: You want to be consistent between success and failure and match the specifiers

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:
```javascript
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()

:memo: Note: You want to be consistent between success and failure and match the specifiers

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:
```javascript
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()

:memo: Note: You want consistency between success and failure.

Framework example:

import Xenon from 'xenon-view-sdk';

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

###### Nextjs example:
```javascript
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()

:memo: Note: You want to be consistent between success and failure and match the specifiers

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:
```javascript
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()

:memo: Note: You want to be consistent between success and failure and match the specifiers

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:
```javascript
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()

:memo: Note: You want to be consistent between success and failure and match the specifiers

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:
```javascript
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()

:memo: Note: You want to be consistent between success and failure and match the specifiers

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:
```javascript
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()

:memo: Note: You want to be consistent between success and failure and match the specifiers

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:
```javascript
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()

:memo: Note: You want to be consistent between success and failure and match the specifiers

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:
```javascript
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>

back to top

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()

:memo: Note: You want to be consistent between success and failure and match the specifiers

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:
```javascript
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()

:memo: Note: You want to be consistent between success and failure and match the specifiers

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:
```javascript
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()

:memo: Note: You want to be consistent between success and failure and match the specifiers

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:
```javascript
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()

:memo: Note: You want to be consistent between success and failure and match the specifiers

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:
```javascript
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 = '$2011'; // optional

// Successful Purchase
Xenon.purchase(SKUs);

// Successful Purchase for $2011
Xenon.purchase(SKUs, price);

Nextjs example:

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

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

  const SKUs = '12345, 6789-b';
  const price = '$2011'; // optional

  // Successful Purchase
  Xenon.purchase(SKUs);

  // Successful Purchase for $2011
  Xenon.purchase(SKUs, price);

HTML example:

<script>
  const SKUs = '12345, 6789-b';
  const price = '$2011'
  function purchasedOccurred() {
    Xenon.purchase(SKUs, price)
    Xenon.commit()
  }
</script>

<button onclick="purchasedOccurred()">Purchase</button>

purchaseCancel()

Framework example:

import Xenon from 'xenon-view-sdk';

const SKUs = '12345, 6789-b'; // optional
const price = '$2011'; // optional

//Customer cancels the purchase.
Xenon.purchaseCancel();
// -OR-
Xenon.purchaseCancel(SKUs);
// -OR-
Xenon.purchaseCancel(SKUs, price);

Nextjs example:

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

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

  const SKUs = '12345, 6789-b'; // optional
  const price = '$2011'; // optional

  //Customer cancels the purchase.
  Xenon.purchaseCancel();
  // -OR-
  Xenon.purchaseCancel(SKUs);
  // -OR-
  Xenon.purchaseCancel(SKUs, price);

HTML example:

<script>
  const SKUs = '12345, 6789-b';
  const price = '$2011'

  function purchaseCanceledOccurred() {
    Xenon.purchaseCancel(SKUs, price)
    Xenon.commit()
  }
</script>

<button onclick="