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

`js
{
...
"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

`js
/*
* 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

`js
// @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);
``