@ezbot-ai/javascript-sdk
v0.3.10
Published
The easiest way to interact with ezbot via JS (node and browser)
Downloads
90
Maintainers
Readme
ezbot-javascript
The easiest way to interact with ezbot via JS (node and browser). For ease of use, our Javascript library wraps Snowplow's Browser Tracker (BSD-3 License).
Getting Started
How to use it in your project via NPM (recommended)
Install
npm install @ezbot-ai/javascript-sdk
Use
import { initEzbot } from '@ezbot-ai/javascript-sdk';
await initEzbot(yourProjectId);
How to use it in your project via <script>
tag
Install
<script src="https://cdn.ezbot.ai/web-snippets/ezbot.min.js"></script>
Use
await ezbot.initEzbot(yourProjectId);
How to develop this library
npm install
npm run fix
npm run test:unit
Sending Events
Send reward events to ezbot to tune the model and improve the quality of the recommendations.
We currently support two types of rewardUnits: count
and dollars
. If you send a reward with dollars
as the rewardUnits, we will use it to calculate the total dollars per session. If you send a reward with count
as the rewardUnits, we will optimize for total count of reward events per session.
We only support one type of rewardUnits
per project today.
Via NPM
import {
initEzbot,
trackPageView,
trackRewardEvent,
startActivityTracking,
makeVisualChanges,
} from '@ezbot-ai/javascript-sdk';
await initEzbot(yourProjectId);
startActivityTracking({
/** The minimum time that must have elapsed before first heartbeat */
minimumVisitLength: 2,
/** The interval at which the callback will be fired */
heartbeatDelay: 2,
});
trackPageView();
trackRewardEvent({ key: 'your_key', reward: 1, rewardUnits: 'count' });
trackRewardEvent({ key: 'another_key', reward: 100, rewardUnits: 'dollars' });
makeVisualChanges(); // Optional. If the variable is a visual change, it will be applied.
Via <script>
tag
await ezbot.initEzbot(yourProjectId);
ezbot.startActivityTracking({
/** The minimum time that must have elapsed before first heartbeat */
minimumVisitLength: 2,
/** The interval at which the callback will be fired */
heartbeatDelay: 2,
});
ezbot.trackPageView();
ezbot.trackRewardEvent({ key: 'your_key', reward: 1, rewardUnits: 'count' });
ezbot.trackRewardEvent({
key: 'another_key',
reward: 100,
rewardUnits: 'dollars',
});
ezbot.makeVisualChanges(); // Optional. If the variable is a visual change, it will be applied.
NextJS
Since we don't yet support server-side rendering, you'll need to notate your component with "use strict"
and use the React Hook useEffect
to initialize ezbot. If you're using Strict Mode, you'll need to use a ref to prevent multiple initializations in your development environment. Strict Mode does not affect production.
'use client';
import { initEzbot } from '@ezbot-ai/javascript-sdk';
import { useEffect, useRef } from 'react';
// your component
export default function Home() {
const ezbotInit = useRef(false);
useEffect(() => {
if (ezbotInit.current) {
return;
}
initEzbot(7);
ezbotInit.current = true;
}, []);
}
Using Predictions
Change your user's experience based on the predictions made by ezbot. For now, you'll need to write custom code to use the predictions.
Below is just an example. After initializing ezbot, you can use the window.ezbot.predictions
object to access the predictions.
Example Predictions Response
{
"holdback": false,
"predictions": [
{
"key": "hero_headline",
"type": "basic",
"version": "0.1",
"value": "Automated Experimentation with AI",
"config": null
},
{
"key": "hero_cta",
"type": "basic",
"version": "0.1",
"value": "Check It Out",
"config": null
}
]
}
Credits
ezbot/ezbot-javascript
is maintained by ezbot and many constributors.
First-party Code
First-party code is stored in the src
directory, with the exception of the vendor
subdirectory.
Third-party Code
Third-party code is brought in via npm, with a full manifest available in the package.json
file. 3rd party code is also present in the src/vendor
directory.
Special Thanks
Special thanks to Snowplow Analytics, Ltd, for their Browser Tracker library and other open source contributions.