Summary

  1. Redirect Method (not ideal, but very easy)
  2. Javascript Method (ideal way!!!)
  3. Dynamic HTML Method (PHP/Python templates)... (less ideal as you will see).

Step 1: Google Analytics Configuration

Setting up a Goal

  //When person submits their URL, load this html
  <script>
  _gaq.push(['_trackEvent', 'Conversions', 'Converted', 'SigneupCCCEmail', 1]);
  </script>

Setting up an Experiment

  1. enter a fake url that does not exist.. (such as asdasdjjj.com), click Start Setup
  2. give it a descriptive name (like fake_test_hoempage_banner_experiment)
  3. now select a metric.  (THIS IS THE GOAL YOU SETUP IN THE LAST STEP!!!!)  
  4. hit next step.
  5. now enter a fake url for each variation you will use... feel free to make it descriptive if you wish.
  6. hit Next step.
  7. Select "Manually insert the code" .. you can ignore the code.. (it's for redirect method).  INSTEAD, get the EXPERIMENT_ID  (this is important for later steps).
  8.  Hit next step and then Start Experiment... (Any warnings can be ignored, the urls you gave were fake.. and that's okay. it's what you want for a 'non-redirect' method.).  NOTE: if you were doing redirect method, you wouldn't want any warnings here..

Step 2: Implementing the Experiment in Code

# Google experiments list
GOOGLE_EXPERIMENTS = {
    'holiday_banner': 'IK__c5dVRNqF2fDB9sZdOA',
    'experiment_description': 'EXPERIMENT_ID', <----
}

import settings
context = {
    'recipe': recipe,
    'experiments': settings.GOOGLE_EXPERIMENTS,  <----
}
self.render_jinja(template, context)

<div class="experiment" data-bind="googleExperiment: {id: '{{ experiments['experiment_description'] }}'>

Method 1: Redirect Method

  1. FIRST, you MUST have 2 unique URL pages (a passed in parameter IS sufficient for uniqueness).  EXAMPLE:  http://mysite.com/home   http://mysite.com/althome  would work,  or http://mysite.com and http://mysite.com?var=1  would work....  BUT THEY MUST BE DIFFERENT< AND YOUR EXPERIMENT IS SIMPLY GOING TO RANDOMLY REDIRECT PEOPLE TO ONE PAGE VS THE OTHER (that is the redirect experiment).
  2. Next, during the Experiment Setup, you must input these 'real' urls into the URL fields for each variation..

Method 2: Javascript Method

   <script src="//www.google-analytics.com/cx/api.js?experiment=WfCFFL4gS_YOUR_EXPERIMENT_ID_HERE_z2ie7J_Vqg3nw"></script>
   <script>

     // 2. Choose the Variation for the Visitor
     var variation = cxApi.chooseVariation();
   
         // Show the HTML or Not!
        var content = document.getElementById("testhtml");
   
    if (variation == 1) {
        content.style.display = "none";
          
            } else {
        content.style.display = "block";
   
        }
   
     cxApi.setChosenVariation(
       variation,             // The index of the variation shown to the visitor
       'WfCFFL4gS_YOUR_EXPERIMENT_ID_HERE_z2ie7J_Vqg3nw'                // The id of the experiment the user has been exposed to
     );
     _gaq.push(['_trackEvent', 'WfCFFL4gS_YOUR_EXPERIMENT_ID_HERE_z2ie7J_Vqg3nw', 'WfCFFL4gS_YOUR_EXPERIMENT_ID_HERE_z2ie7J_Vqg3nw',         'WfCFFL4gS_YOUR_EXPERIMENT_ID_HERE_z2ie7J_Vqg3nw', variation, true]);
   
   </script>

   <script src="//www.google-analytics.com/cx/api.js?experiment=8eynxD_YOUR_EXPERIMENT_ID_HERE_JCSC2X3lOOS8IyhQ"></script>
   <script>
   var $j = jQuery.noConflict();
   $j(window).bind("load", function() {
     // 2. Choose the Variation for the Visitor
     var variation = cxApi.chooseVariation();
   
         // Show the HTML or Not!
        var content = document.getElementById("theccclogo");
   
    if (variation == 1) {
        content.style.width = "400px";
        content.style.height = "295px";
        content.style.top="-270px";
        content.style.left="270px";
        content.style.marginBottom="-250px";
          
            } else {
   
        }
   
     cxApi.setChosenVariation(
       variation,             // The index of the variation shown to the visitor
       '8eynxD_YOUR_EXPERIMENT_ID_HERE_JCSC2X3lOOS8IyhQ'                // The id of the experiment the user has been exposed to
     );
     _gaq.push(['_trackEvent', '8eynxD_YOUR_EXPERIMENT_ID_HERE_JCSC2X3lOOS8IyhQ', '8eynxD_YOUR_EXPERIMENT_ID_HERE_JCSC2X3lOOS8IyhQ',     '8eynxD_YOUR_EXPERIMENT_ID_HERE_JCSC2X3lOOS8IyhQ', variation, true]);
   });
   </script>

Method 3: Dynamic HTML Method (PHP/Python templates)

  <script src="//www.google-analytics.com/cx/api.js"></script>

  <?php
  // The Id of the experiment running on the page
  $experimentId = 'YByMKfprRCStcMvK8zh1yw';
  
  // The default variation chosen for the visitor
  // I DON’T SET This here, because I set it later on in the code … $chosenVariation= 0;
  ?>

  <?php
  $ipaddr = $_SERVER['REMOTE_ADDR'];
  $lastval = substr($ipaddr, -1);
  $lastvalmod2 = $lastval%2;
  if($lastvalmod2 === 1) {
  $chosenVariation= 0;
  } else { $chosenVariation= 1; }
  ?>

  <script>
    cxApi.setChosenVariation(
      <?php echo $chosenVariation; ?>,             // The index of the variation shown to the visitor
      '<?php echo $experimentId ?>'                 // The id of the experiment the user has been exposed    to
    );
    _gaq.push(['_trackEvent', '<?php echo $experimentId ?>', '<?php echo $experimentId ?>', '<?php echo    $chosenVariation; ?>', <?php echo $chosenVariation; ?>, true]);
  </script>

Step 3: Look at Results and Pick a Winner

NOTE ABOUT SETTING PERCENTAGE OF TRAFFIC TO EXPERIMENT

APPENDIX: MORE INFORMATION ON STUFF

• • • • WARNING make sure you set your paths right to where you install these libraries.

GOTCHA: The oauth2 callback url must be set to your file (e.g. SetupAnalytics.php) or whatever.

         You are doing a POST to google using an oauthed user to create the experiment.

  In my sample code… 

   I made 2 variations of a page… and I gave them names… and most importantly,

   I did the setServingFramework(‘API’)  to the experiment…. This is needed!
      Here’s the full definitions of the Management.experiments view: https://developers.google.com/analytics/devguides/config/mgmt/v3/mgmtReference/management/experiments

 cxApi.setChosenVariation(
   $chosenVariation,             // The index of the variation shown to the visitor
   $experimentId                 // The id of the experiment the user has been exposed to
 );
 

 cxApi.setChosenVariation(
   <?php echo $chosenVariation; ?>,             // The index of the variation shown to the visitor
   '<?php echo $experimentId ?>'                 // The id of the experiment the user has been exposed to
 );
 _gaq.push(['_trackEvent', '<?php echo $experimentId ?>', '<?php echo $experimentId ?>', '<?php echo $chosenVariation; ?>', <?php echo $chosenVariation; ?>, true]);

 // 2. Choose the Variation for the Visitor
 var variation = cxApi.chooseVariation();

     // Show the HTML or Not!
    var content = document.getElementById("testhtml");

    content.style.display = "none";
      
        } else {
    content.style.display = "block";

    }

 cxApi.setChosenVariation(
   variation,             // The index of the variation shown to the visitor
   'WfCFFL4gSz2ie7J_Vqg3nw'                // The id of the experiment the user has been exposed to
 );
 _gaq.push(['_trackEvent', 'WfCFFL4gSz2ie7J_Vqg3nw', 'WfCFFL4gSz2ie7J_Vqg3nw', 'WfCFFL4gSz2ie7J_Vqg3nw', variation, true]);

Testing experiments

http://keyingredient.com/?test_[experiment_id]=[variation_value]&test_[experiment2_id]=[variation_value]

http://keyingredient.com/?test_jFaGW6l6Rny0tjL_lsOPeQ=1

http://keyingredient.com/?test_[experiment_id]

http://keyingredient.com/?test_jFaGW6l6Rny0tjL_lsOPeQ

assets/js/src/models/googleexperiment.js