💻 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