NAV
bash

AB Tasty Modules CLI

Create AB Tasty module that connects to AB Tasty or third party API’s to enhance AB Tasty platform behavior.

What is a module

A module is a small package (a single Javascript file) that will be displayed on the AB Tasty platform in a particular section of the platform (Insights, Settings, …) It allows third party developer to add features in the AB Tasty platform. For the module to work, the module have to have it’s own API (or an existing one) that the Javascript can call

Quick start

Creating your module

You have to install the module CLI made by the innovation team:

npm install -g @abtasty-innovation/module-cli

Then run the following command to initialize the module:

abtasty-module-cli new

Then follow the instructions of the CLI command to create your module. Once it is created you can go into your module folder and run:

npm start

It will provides you with an embedded module interface where you will be able to login to AB Tasty and test multiple module configurations

Module CLI tutorial

This interface will not be visible on the published version of your module, it is just an helper to simulate a real user connection.

Developing your module

Once you have created your module, you can develop it as a regular node based frontend repository.

The module system automatically fillout global variables that you can use inside your module to access minimal information about the current AB Tasty account of the user.

See more here : Develop your module

Publishing your module

Once your module is ready to be integrated in the lab tab in the production environment, you have to package it and send the packaged version to the innovation team.

See more here : Publish your module

Create a Module

1. Prerequisites

2. Create your module

Thanks to the AB Tasty Module CLI, you can easily create a production-ready module right out of the box. It already follows our best practices! Just run the command below and answer the questions:

abtasty-module-cli new

3. File structure

Once your module is generated, you will find theses files in your project’s folder:

Along with many standard file to make the code running (webpack configuration, eslint, babel, …).

The main.js file is the entry point of your module’s code. From here you can import other JS files, and use the latests versions of Javascript if you want to.

If you chose the Vue or React templates, you will see more files corresponding to the standard boilerplate for these technologies.

Develop a Module

Javascript file

An AB Tasty module requires a unique JavaScript file that will be injected into the client’s website. That means every static resource (css, image, fonts, …) must be either injected into this JavaScript, or loaded with an external URL.

You can easily code directly into a single file. To get the latest JavaScript features, we recommend using a bundler like rollup.js or webpack in combination with a transpiler like bublé or babel.

Please note that the module generated by the AB Tasty Module CLI uses rollup.js and babel out of the box. In this case, the bundled file will probably be generated in a folder such as /dist or /build.

Globals variables

You can access the window._ab global variable everywhere in your code.
This variable is a JavaScript object which has the following fields :

It also provides a storage object that has the following methods: * storage.get : function (key, callback) - Enables a module to get a stored key/value for the module instance. The callback function will be called with a value argument containing the value object. * storage.set : function (key, value, callback) - Enables a module to set a stored key/value for the module instance. Value must be and object that can be stringified. The callback function will be called without arguments when the value is stored.

And a tracking object that has the following methods: * tracking.track : function (eventName, params) - Track a custom event with custom variables into heap analytics

QA your module

To test your module, simply use this command from the root of your module folder: npm start

Module dev interface

An interface will then pop up on your screen, allowing you to test your module with different configurations. Under the hood, this calls the AB Tasty module cli to serve your files with the embedded module interface and injection.

Here are some examples of configuration options:

Finally, the webpage view on the right-hand side loads the module code your wrote and inject into it the window._ab object before loading it. It takes into account the fields of the configuration form that are visible on the left-hand side.

Security measures

The module ecosystem is just a way to embed independant front end applications into the AB Tasty platform.

You module can call multiple backends in order to add features:

In the case you have to make a custom API for your module, please implement the following minimal security measures:

Publish a Module

To submit your module to AB Tasty and make it available to the AB Tasty customer base, please follow the steps below:

1. Package your module

If you used the module CLI to generate your module source code, you can use the following command:

npm run package

This step will create a zip file with the minified script inside.

2. Send us your module

Once your module is packaged, you can send the zip file to:

In your email, please provide the following information: