Mandrill

This repo is part of Mandrill for Frontend Web & React Native

Getting started

How to publish a new version

1. Run yarn (To make sure everything is ok)
2. Update package.json with version number
3. Run yarn login when needed (Credentials in Lastpass)
4. Run yarn publish:private
5. Commit and push (Add tag with version)

1. Set the correct npm Github Registry

If you don't already configured the N5 NPM repository, do so first by running:

npm login --scope=@novemberfiveco --registry=https://npm.pkg.github.com

2. Add Mandrill & Mandrill services to your package.json's dependencies with the correct version

{
  ...
  "dependencies": {
    "mandrill": "@novemberfiveco/mandrill",
    "mandrill-service-google-analytics": "@novemberfiveco/mandrill-service-google-analytics",
    "mandrill-service-firebase": "@novemberfiveco/mandrill-service-firebase",
    "mandrill-service-fabric": "@novemberfiveco/mandrill-service-fabric",
  },
  ...
}

• https://github.com/novemberfiveco/nove-tool-frontend-mandrill-google-analytics
• https://github.com/novemberfiveco/nove-tool-frontend-mandrill-firebase-react-native
• https://github.com/novemberfiveco/nove-tool-frontend-mandrill-fabric-react-native

Run yarn install

3. Generate the Mandrill tracking-code for your specific project

You'll need another monkey 🙈 🙉 🙊 🐵 pygmy, with frontend extensions

• https://bitbucket.org/appstrakt/apps-tool-pygmy-cli
• https://bitbucket.org/appstrakt/nove-tool-pygmy-cli-extras-frontend

Run pygmy frontend mandrill init to generate the config yaml

Run pygmy frontend mandrill gen to generate the Mandrill tracking-code

4. Configure Mandrill (for React & React Native apps)

Example for Google Analytics service:

Create an Analytics Provider that registers services to Mandrill

/*
 * AnalyticsProvider.js
 *
 * @flow
 */

import React, { Component } from 'react';
// Import Mandrill (node_module)
import { serviceManager } from 'mandrill';
// Import Google Analytics Mandrill Service (node_module)
import GoogleAnalyticsService from 'mandrill-service-google-analytics';
// Import service configuration from generated tracking code
import { googleanalytics1 } from 'src/mandrillGenerated/config.mandrill';

class AnalyticsProvider extends Component {
  // Lifecycle methods
  componentDidMount() {
    // Create Google Analytics Service
    const { id } = googleanalytics1;
    const googleAnalyticsService = new GoogleAnalyticsService(id);

    // Register Google Analytics Service to Mandrill
    serviceManager.registerService(googleAnalyticsService);
  }

  // Render
  render() {
    return this.props.children;
  }
}

export default AnalyticsProvider;

Wrap this provider around the app

5. Call methods from generated Mandrill tracking-code

// @flow

// Import methods form generated Mandrill tracking-code
import { trackSomethingRandom, trackScreenView, trackButtonPress } from 'src/mandrillGenerated/config.mandrill';

// Call methods form generated Mandrill tracking-code
trackSomethingRandom();

const screenViewName = 'checkout';
trackScreenView(screenViewName);

const buttonName = 'pay-button';
trackButtonPress(buttonName);