Pushtell A/B Testing React Component, Segment.com Helper Example

by pushtell

HTML

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://fb.me/react-with-addons-0.14.0.min.js"></script>
<script src="https://fb.me/react-dom-0.14.0.min.js"></script>
<script src="https://rawgit.com/pushtell/react-ab-test/master/standalone.min.js"></script>
<!-- Bootstrap Boilerplate -->
<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <div id="react"></div>
        </div>
    </div>
</div>

Babel + JSX

// A/B Testing React Component, Single Component Example

// var Experiment = require("react-ab-test/lib/Experiment");
// var Variant = require("react-ab-test/lib/Variant");
// var mixpanelHelper = require("react-ab-test/lib/helpers/mixpanel");

// Experiment, Variant, and mixpanelHelper are defined 
// in https://rawgit.com/pushtell/react-ab-test/master/standalone.min.js
// for JSFiddle testing purposes.

// Segment.com  Snippit
!function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","page","once","off","on", "debug"];analytics.factory=function(t){return function(){var e=Array.prototype.slice.call(arguments);e.unshift(t);analytics.push(e);return analytics}};for(var t=0;t<analytics.methods.length;t++){var e=analytics.methods[t];analytics[e]=analytics.factory(e)}analytics.load=function(t){var e=document.createElement("script");e.type="text/javascript";e.async=!0;e.src=("https:"===document.location.protocol?"https://":"http://")+"cdn.segment.com/analytics.js/v1/"+t+"/analytics.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(e,n)};analytics.SNIPPET_VERSION="3.1.0"; analytics.debug(); analytics.load("Ovh9rJDYwrrfoTMMj8p5LVB6pwutYsQm"); analytics.page(); }}();

segmentHelper.enable();

var App = React.createClass({
  onButtonClick: function(e){
    emitter.emitWin("My Example");
    // segmentHelper sends the 'Experiment Win' event, equivalent to:
    // segment.track('Experiment Win', {Experiment: "My Example", Variant: "A"})
  },
  componentWillMount: function(){
    // segmentHelper sends the 'Experiment Play' event, equivalent to:
    // segment.track('Experiment Play', {Experiment: "My Example", Variant: "A"})
  },
  render: function(){
   ...