@justeat/f-braze-adapter

f-braze-adapter

Braze Content Cards Interface.

---

This package provides an interface for initialising Braze and handling content cards and in-app messages.

Usage

Installation

Install the module using npm or Yarn:

yarn add @justeat/f-braze-adapter

npm install @justeat/f-braze-adapter

The package can then be imported into your application. You can use with import or require syntax:

import initialiseBraze from '@justeat/f-braze-adapter';

const initialiseBraze = require('@justeat/f-braze-adapter');

Initialisation

The package comes with one method for initialising Braze, or retrieving the already initialised module.

This method returns an instance of the BrazeAdapter class, which can also be used for logging interactions with braze elements returned from the API.

All other functionality, such as handling content cards or intercepting in-app messages can be done with callbacks passed through config.

Note that the noCookies option is passed to braze SDK as true if the je-cookieConsent cookie (as set by @justeat/f-cookie-banner) is not "full".

Basic Example

import initialise from '@justeat/f-braze-adapter'

const config = {
  apiKey: '1234-1234-1234',
  userId: 'ABC123',
  enableLogging: true,
  disableComponent: false,
  callbacks: {
    handleContentCards: cards => console.log(cards), // Braze content cards data
    handleContentCardsGrouped: groupedCards => console.log(groupedCards), // Braze content cards data
    interceptInAppMessages: inAppMessage => console.log(inAppMessage) // Braze in app message data
  }
};

const brazePromise = initialise(config);

// The below assumes card data is being rendered into elements with class "brazeCard", that they
// have card data as returned by braze attached to a "data-content-card" attribute, and that all
// elements accessible via that css selector are visible

brazePromise.then(brazeAdapter => {
  const brazeCards = document.querySelectorAll('.brazeCard');

  let brazeCardsData = [];

  brazeCards.forEach(brazeCard => {
    brazeCardsData.push(brazeCard.dataset.contentCard);

    brazeCard.addEventListener('click', clickEvent => {
      brazeAdapter.logCardClick(brazeCard.dataset.contentCard);
    });
  });

  brazeAdapter.logCardImpressions(brazeCardsData);
});

Unsubscribing

When the BrazeAdapter is no longer required, calling the unsubscribe method on the Adapter will remove it from the internal registry of consumers

brazeAdapter.unsubscribe();

Config Object

config.apiKey

The Braze API key used when invoking calls to the Braze SDK. This can be found in the Braze Dashboard at App Settings->Developer Console->Rest API Keys.

config.brands

Sets the brands that the consumers have an interest in. Is concatenated to the current list of brands held by the Braze adapter.

config.userId

The user ID to retrieve data for.

config.enableLogging

Enable/Disable verbose logging from the Braze SDK used for debugging.

config.disableComponent

Enable/Disable the Braze SDK when running experiments or feature toggling.

config.callbacks.handleContentCards

A callback to be invoked when content cards have been retrieved.

config.callbacks.handleContentCardsGrouped

A callback to be invoked when content cards have been retrieved, grouped by header card title.

config.callbacks.interceptInAppMessages

A callback to be invoked when in-app messages have been retrieved.

Please note: The dispatcher fires callbacks registered for in-app messages before it triggers the messages.

config.callbacks.interceptInAppMessageClickEvents

The callback to be invoked when in-app messages have been clicked.

Migration to v2

Version 2 exposes the appboy instance as opposed to content cards as part of the refresh callback, this makes it easier to access properties on the instance such as getUnviewedCardCount and is a step closer to an isomorphic solution.

Accessing Cards

Cards are now accessible on myCallbackMethod.cards.

For example

// v1 implementation
const myCallback = cards => console.log(cards); // [...cards]
appboy.requestImmediateRefresh();
// [...cards]

// v2 implementation
const myCallback = cardsInstance => console.log(cardsInstance); // {cards: [...cards]}
appboy.requestImmediateRefresh();
// { cards: [...cards]}

Resources

Name	Description	Link
Appboy Technical Documentation	All documentation associated to the Javascript web SDK	https://js.appboycdn.com/web-sdk/2.5/doc/module-appboy.html
Appboy GitHub Repo	Code repo and issue tracking	https://github.com/Appboy/appboy-web-sdk

Changelog

v5.0.0

October 21, 2021

Added

• Component folders for templates and pages.
• Templates are for layout components that are intended to handle page level layout decisions (for example, a sideNav layout such as on our account pages). Templates don't contain any logic around the actual set of pages, they just handle the overall layout structure and styling.
• Pages are for our largest organisms, whereby they are a collection of components that make up the main body of a page. For example, f-registration and f-checkout are both examples of page components.

Changed

• Config for CircleCI, Lerna, yarn workspaces and danger.js updated to include new folder paths.
• Moved f-registration into pages directory. Will look to move other organisms one-by-one by liaising with each team working on these components.