Supplements + Mixpanel

gawVLE.markdown

Mixpanel page for tracking my supplements

Forked from Captain Anonymous's Pen vOMPVM.

A Pen by Robert C Edwards on CodePen.

License.

index.html

<div class="wrap" >
  <div class="blog-list">
    <a href="#" class="link">NAC</a>
    <input class="child" id="supplement" type="number" min="5" max="18" step="0.5" value="500" name="dose"/>mg
     <a href="#" class="link">Methyl Folate</a>
    <input class="child" id="supplement" type="number" min="5" max="18" step="0.5" value="400" name="dose"/>mcg
    <a href="#" class="link">P-5-P</a>
    <input class="child" id="supplement" type="number" min="5" max="18" step="0.5" value="50" name="dose"/>mg
    <a href="#" class="link">Methyl B12</a>
    <input class="child" id="supplement" type="number" min="5" max="18" step="0.5" value="5000" name="dose"/>mcg
    <a href="#" class="link">Taurine</a>
    <input class="child" id="supplement" type="number" min="5" max="18" step="0.5" value="600" name="dose"/>mg       
  </div>
</div>

script.js

(function(e,b){if(!b.__SV){var a,f,i,g;window.mixpanel=b;b._i=[];b.init=function(a,e,d){function f(b,h){var a=h.split(".");2==a.length&&(b=b[a[0]],h=a[1]);b[h]=function(){b.push([h].concat(Array.prototype.slice.call(arguments,0)))}}var c=b;"undefined"!==typeof d?c=b[d]=[]:d="mixpanel";c.people=c.people||[];c.toString=function(b){var a="mixpanel";"mixpanel"!==d&&(a+="."+d);b||(a+=" (stub)");return a};c.people.toString=function(){return c.toString(1)+".people (stub)"};i="disable time_event track track_pageview track_links track_forms register register_once alias unregister identify name_tag set_config people.set people.set_once people.increment people.append people.union people.track_charge people.clear_charges people.delete_user".split(" ");
for(g=0;g<i.length;g++)f(c,i[g]);b._i.push([a,e,d])};b.__SV=1.2;a=e.createElement("script");a.type="text/javascript";a.async=!0;a.src="undefined"!==typeof MIXPANEL_CUSTOM_LIB_URL?MIXPANEL_CUSTOM_LIB_URL:"file:"===e.location.protocol&&"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js".match(/^\/\//)?"https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js":"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js";f=e.getElementsByTagName("script")[0];f.parentNode.insertBefore(a,f)}})(document,window.mixpanel||[]);
mixpanel.init("6e6de3c5ec83de5fae05938e6caeb5bb");

window.setTimeout(initMixpanel, 1000)

function initMixpanel() {
  mixpanel.init("xyz", {
    'loaded': function() { 
      mixpanel.track('exception here')
    }
  })
}
    $("a").click(function(event) {
        var cb = generate_callback($(this));
        var dose = $(this).next('input').val();
        event.preventDefault();
        mixpanel.identify("RobertCEdwards");
        mixpanel.people.set({"$email": "[email protected]"});                                      
        mixpanel.time_event("Took");
        mixpanel.track("Took", {"Supplement": this.text, "Dose(mg)": dose
 });
      
        setTimeout(cb, 500);
    })
        
    function generate_callback(a) {
        return function() {
            window.location = a.attr("href");
        }
    }

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

// This is a pen for creating smarter HTML layouts with Sass and Susy. Take a look at the blog post for more information on how this is derived. 
// 

@import "susy"; 

$susy: (
  columns: 12, 
  gutter-position: split,
  debug: (image: show)
);

.wrap {
  @include container(1140px);
}

.blog-list 
  > div {
    // .. Mobile styles for the layout here 
@media (min-width: 1px) and (max-width: 767px){
      @include span(1);
      margin-bottom: gutter();
      &:nth-child(5n+1) {
        @include span(1);
      }      
    }
    // Tablet Layout Pattern
    @media (min-width: 768px) and (max-width: 1024px){
      @include span(6);
      margin-bottom: gutter();
      &:nth-child(5n+1) {
        @include span(12);
      }      
    }

    // Desktop Layout Pattern
    @media (min-width: 1025px) {
      @include span(4);
      margin-bottom: gutter();

      &:nth-child(10n+1), 
      &:nth-child(10n+7) {
        @include span(8);
      }
    }
  }


.blog-list > a {
  height: 200px;    
  padding: 1em;
  margin:1em;
  text-size: 2em;
  font-family: "San Francisco";
  font-weight: 500;  
  text-decoration: none;
  color: #fff;
  background-color: #6496c8;
  border: none;
  border-radius: 15px;
  box-shadow: 0 10px #27496d;

  
}
.blog-list > a:hover,
.blog-list > a.hover {
  background-color: #417cb8
}

.blog-list > a:active,
.blog-list > a.active {
  background-color: #417cb8;
  box-shadow: 0 5px #27496d;
  transform: translateY(5px);
}

/**
 * http://applemusic.tumblr.com/
 */

/** Ultra Light */
@font-face {
  font-family: "San Francisco";
  font-weight: 100;
  src: url("http://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-ultralight-webfont.woff2");
}

/** Thin */
@font-face {
  font-family: "San Francisco";
  font-weight: 200;
  src: url("http://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-thin-webfont.woff2");
}

/** Medium */
@font-face {
  font-family: "San Francisco";
  font-weight: normal;
  src: url("http://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-medium-webfont.woff2");
}

/** Semi Bold */
@font-face {
  font-family: "San Francisco";
  font-weight: 500;
  src: url("http://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-semibold-webfont.woff2");
}

/** Bold */ 
@font-face {
  font-family: "San Francisco";
  font-weight: bold;
  src: url("http://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-bold-webfont.woff2");
}

Supplements + Mixpanel.markdown

Supplements + Mixpanel

Supplement usage tracking using Mixpanel

A Pen by Robert C Edwards on CodePen.

License.