Track newsletter UI events with MixPanel

[MAILPOET-999]

assets/js/src/newsletter_editor/components/save.js

@@ -140,6 +140,9 @@ define([
       );
 
       FileSaver.saveAs(blob, 'template.json');
+      MailPoet.trackEvent('Editor > Template exported', {
+        'MailPoet Free version': window.mailpoet_version
+      });
     });
   };
 
@@ -225,6 +228,9 @@ define([
               scroll: true
             }
           );
+          MailPoet.trackEvent('Editor > Template saved', {
+            'MailPoet Free version': window.mailpoet_version
+          });
         }).fail(function() {
           MailPoet.Notice.error(
             MailPoet.I18n.t('templateSaveFailed'),

assets/js/src/newsletter_editor/components/sidebar.js

@@ -285,6 +285,10 @@ define([
             this.previewView = null;
           }.bind(this)
         });
+
+        MailPoet.trackEvent('Editor > Browser Preview', {
+          'MailPoet Free version': window.mailpoet_version
+        });
       }.bind(this)).fail(function(response) {
         if (response.errors.length > 0) {
           MailPoet.Notice.error(
@@ -326,7 +330,12 @@ define([
         }).done(function(response) {
           MailPoet.Notice.success(
             MailPoet.I18n.t('newsletterPreviewSent'),
-            { scroll: true });
+            { scroll: true }
+          );
+          MailPoet.trackEvent('Editor > Preview sent', {
+            'MailPoet Free version': window.mailpoet_version,
+            'Domain name': data.subscriber.substring(data.subscriber.indexOf('@') + 1)
+          });
         }).fail(function(response) {
           if (response.errors.length > 0) {
             MailPoet.Notice.error(

assets/js/src/newsletters/listings/standard.jsx

@@ -198,7 +198,14 @@ const NewsletterListStandard = React.createClass({
     return (
       <div>
         <h1 className="title">
-          {MailPoet.I18n.t('pageTitle')} <Link className="page-title-action" to="/new">{MailPoet.I18n.t('new')}</Link>
+          {MailPoet.I18n.t('pageTitle')}
+          <Link className="page-title-action" to="/new"
+            onClick={() => MailPoet.trackEvent('Emails > Add New',
+              { 'MailPoet Free version': window.mailpoet_version }
+            )}
+          >
+            {MailPoet.I18n.t('new')}
+          </Link>
         </h1>
 
         <ListingTabs tab="standard" />

assets/js/src/newsletters/listings/tabs.jsx

@@ -38,6 +38,9 @@ const ListingTabs = React.createClass({
           key={ 'tab-'+index }
           className={ tabClasses }
           to={ tab.link }
+          onClick={() => MailPoet.trackEvent(`Tab Emails > ${tab.name} clicked`,
+            { 'MailPoet Free version': window.mailpoet_version }
+          )}
         >{ tab.label }</Link>
       );
     });

assets/js/src/newsletters/send.jsx

@@ -110,16 +110,25 @@ define(
                 }).done((response) => {
                   // redirect to listing based on newsletter type
                   this.context.router.push(`/${ this.state.item.type || '' }`);
-
+                  const opts = this.state.item.options;
                   // display success message depending on newsletter type
                   if (response.data.type === 'welcome') {
                     MailPoet.Notice.success(
                       MailPoet.I18n.t('welcomeEmailActivated')
                     );
+                    MailPoet.trackEvent('Emails > Welcome email activated', {
+                      'MailPoet Free version': window.mailpoet_version,
+                      'List type': opts.event,
+                      'Delay': opts.afterTimeNumber + ' ' + opts.afterTimeType,
+                    });
                   } else if (response.data.type === 'notification') {
                     MailPoet.Notice.success(
                       MailPoet.I18n.t('postNotificationActivated')
                     );
+                    MailPoet.trackEvent('Emails > Post notifications activated', {
+                      'MailPoet Free version': window.mailpoet_version,
+                      'Frequency': opts.intervalType,
+                    });
                   }
                 }).fail(this._showError);
               default:
@@ -138,10 +147,18 @@ define(
                     MailPoet.Notice.success(
                       MailPoet.I18n.t('newsletterHasBeenScheduled')
                     );
+                    MailPoet.trackEvent('Emails > Newsletter sent', {
+                      scheduled: true,
+                      'MailPoet Free version': window.mailpoet_version,
+                    });
                   } else {
                     MailPoet.Notice.success(
                       MailPoet.I18n.t('newsletterBeingSent')
                     );
+                    MailPoet.trackEvent('Emails > Newsletter sent', {
+                      scheduled: false,
+                      'MailPoet Free version': window.mailpoet_version,
+                    });
                   }
                 }).fail(this._showError);
             }

assets/js/src/newsletters/templates.jsx

@@ -51,6 +51,7 @@ define(
 
         if (_.size(this.refs.templateFile.files) <= 0) return false;
 
+
         const file = _.first(this.refs.templateFile.files);
         const reader = new FileReader();
         const saveTemplate = this.saveTemplate;
@@ -58,6 +59,9 @@ define(
         reader.onload = (e) => {
           try {
             saveTemplate(JSON.parse(e.target.result));
+            MailPoet.trackEvent('Emails > Template imported', {
+              'MailPoet Free version': window.mailpoet_version,
+            });
           } catch (err) {
             MailPoet.Notice.error(MailPoet.I18n.t('templateFileMalformedError'));
           }
@@ -143,6 +147,11 @@ define(
           body = JSON.stringify(body);
         }
 
+        MailPoet.trackEvent('Emails > Template selected', {
+          'MailPoet Free version': window.mailpoet_version,
+          'Email name': template.name,
+        });
+
         MailPoet.Ajax.post({
           api_version: window.mailpoet_api_version,
           endpoint: 'newsletters',

assets/js/src/newsletters/types.jsx

@@ -20,9 +20,17 @@ define(
       setupNewsletter: function (type) {
         if(type !== undefined) {
           this.context.router.push(`/new/${type}`);
+          MailPoet.trackEvent('Emails > Type selected', {
+            'MailPoet Free version': window.mailpoet_version,
+            'Email type': type,
+          });
         }
       },
       createNewsletter: function (type) {
+        MailPoet.trackEvent('Emails > Type selected', {
+          'MailPoet Free version': window.mailpoet_version,
+          'Email type': type,
+        });
         MailPoet.Ajax.post({
           api_version: window.mailpoet_api_version,
           endpoint: 'newsletters',

tests/javascript/newsletter_editor/components/save.spec.js

@@ -157,7 +157,8 @@ define([
               Notice: {
                 success: function() {},
                 error: function() {}
-              }
+              },
+              trackEvent: function() {}
             },
             'newsletter_editor/App': EditorApplication,
             'html2canvas': function() {