@beyable/sdk

💻 sdk

🧐 Description

This repository provides a powerful SDK which allows you to display campaign that you have created from the Beyable's backoffice.

You can have a look to the Beyable SDK documentation for more details

⚙️ Install

with yarn:

yarn add @beyable/sdk

🤔 How to use it?

🔓 Authentication

First, you have to create an instance of "Beyable" and set your token.

import { Beyable } from '@beyable/sdk';

const beyable = new Beyable({ token: 'xxxxxxxxxxxxxxxxx' });

export { beyable };

⭐ Send "PageView" event

To activate your campaign on a specific page, use sendPageView method with attributes corresponding of your page type.

import { EPageUrlType } from '@beyable/sdk';
import { beyable } from './libs/beyable.ts';

/**
 * @description Sends homepage "PageView".
 * @returns {Promise}
 */
const beyablePageView = () => {
  beyable.page.setAttributes({
    urlType: EPageUrlType.HOME,
    homePage: {
      tags: ['homepage', 'corporate'],
    },
    pageReferrer: document.referrer,
    url: 'http://localhost',
  });

  return beyable.sendPageview();
};

// Fire your event on "onload" done
document.addEventListener('onload', beyablePageView);

⭐ Method "setAttributes()"

Attribute	Type	actions
urlType	string	Specify the type of page
pageReferer	string	Fill the referer
url	string	Fill url of your web site

⭐ Attribute "urlType“

Key	Description
EPageUrlType.HOME	Access to homePage attributes.
EPageUrlType.CART	Access to cartPage attributes.
EPageUrlType.CATEGORY	Access to categoryPage attributes.
EPageUrlType.TRANSACTION	Access to transactionPage attributes.
EPageUrlType.PRODUCT	Access to productPage attributes.

⭐ Attribute "homePage"

Example of data you can send from your home page.

beyable.page.setAttributes({
  urlType: EPageUrlType.HOME,
  pageReferrer: document.referrer,
  url: 'http://www.my-web-site.com',
  homePage: {
    tags: ['homepage', 'corporate'],
  },
});

Attribute	Type	Actions
tags	string[ ]	Fill tags values to link trigger on it.

⭐ Attribute "cartPage"

Example of data you can send from your cart page.

beyable.page.setAttributes({
  urlType: EPageUrlType.CART,
  pageReferrer: document.referrer,
  url: 'https://my-web-site.com/cart',
  cartPage: {
    tags: ['cart'],
  },
});

Attributes	Type	Actions
tags	string[]	Fill tags values to link trigger on it.

⭐ Attribute "categoryPage"

Example of data you can send from your category page.

beyable.page.setAttributes({
  urlType: EPageUrlType.CATEGORY,
  pageReferrer: document.referrer,
  url: 'https://my-web-site.com/shoes/sport/running',
  categoryPage: {
    categoryId: 'SportShoes123',
    categoryName: 'Running',
    tags: ['running', 'shoes', 'sport'],
  },
});

Attributes	Type	Actions
categoryId	string	Fill categoryId value to link trigger on specific. category id
categoryName	string	Fill categoryName value to link trigger on specific. category name
tags	string[]	Fill tags values to link trigger on it.

⭐ Attribute "transactionPage"

Example of data you can send from your transaction page.

beyable.page.setAttributes({
  urlType: EPageUrlType.TRANSACTION,
  pageReferrer: document.referrer,
  url: 'https://my-web-site.com/transaction',
  transactionPage: {
    tags: ['transaction'],
  },
});

Attributes	Type	Actions
tags	string[]	Fill tags values to link trigger on it.

⭐ Attribute "genericPage"

If you want to customize your own tagging strategy, you can choose the "genericPage" type rather than the predefined ones on each urlType interface.

beyable.page.setAttributes({
  urlType: EPageUrlType.PRODUCT,
  genericPage: {
    customValue1: 'customValue1',
    customValue2: 'customValue2',
    customValue3: 'customValue3',
    customValue4: 'customValue4',
    customValue5: 'customValue5',
    tags: ['tag1'],
  },
  pageReferrer: 'https://www.google.fr',
  url: '',
});

⭐ Scripts

Run using yarn run <script> command.

clean       - Remove temporarily folders.
build       - Compile source files.
build:watch - Interactive watch mode, compile sources on change.
lint        - Lint source files.
lint:fix    - Fix lint source files.
test        - Runs all tests with coverage.
test:watch  - Interactive watch mode, runs tests on change.

📝 License

MIT © Beyable