npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@justeat/f-braze-adapter

v5.2.0

Published

Fozzie Metadata Service

Downloads

68

Readme

f-braze-adapter

Braze Content Cards Interface.


npm version CircleCI Coverage Status Known Vulnerabilities

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 |