Skip to content

Pinpoint Experiments

Jump to bottom Edit New page
nt3rp edited this page Sep 17, 2012 · 6 revisions

In order to setup a PinPoint experiment, you'll need to do the following:

  • Get access to the user's store

  • Create a new page for Pinpoint, and add the following code (make sure you are in source view):

      <style type="text/css">
      #willet-main { font-family: Arial, Helvetica, Tahoma !important; margin: 0; padding: 0;}
      #willet-main h1 { font-size: 20px; }
      #willet-main p { font-size: 13px; margin: 0; padding: 0;}
      #willet-main table, #willet-main tr, #willet-main td { margin: 0; padding: 0; }
  
      #willet-main #wrapper {
          width: 950px;
          margin: 5px auto;
          text-align: center;
      }
  
      .column {
          float: left;
          width: 200px;
          margin: 15px;
      }
      #willet-main .pin {
          margin: 0 0 30px 0;
          background: #cecece;
          position: relative;
          text-align: center;
          overflow: hidden;
          width: 200px;
  
          -moz-box-shadow: 0px 8px 16px 0px #cecece;
          -webkit-box-shadow: 0px 8px 16px 0px #cecece;
          -o-box-shadow: 0px 8px 16px 0px #cecece;
          box-shadow: 0px 8px 16px 0px #cecece;
      }
      #willet-main .inner-pin {
          overflow: hidden;
          width: 200px;
          margin-right: 5px;
          text-align: center;
          background:#f6f6f6;
      }
      #willet-main .inner-pin h5 {
          margin: 0;
          padding: 10px 10px 5px 10px;
          font-size: 13px;
          font-weight: normal;
          color: #fff;
          width: 140px;
          background: #161616;
          background: rgba(0,0,0,0.8);
          bottom: 15px;
          position: absolute;
          display: block;
          text-align: left;
      }
  
      #willet-main .inner-pin h5:hover {
          text-decoration: underline;
      }
  
      #willet-main .pinimg a:link{
          border-bottom: none;
          background: #fff;
          width: 175px;
          padding-right: 5px;
          margin-left: auto;
          margin-right: auto;
      }
  
      #willet-main .pin img { }
      #willet-main .pin a { border: none; overflow: hidden; }
      #willet-main .pin a img { border: none; overflow: hidden; }
  
      #willet-main a { text-decoration: none; color: #2d2d2d;}
      #willet-main a:hover { text-decoration: underline; }
      #willet-main .link a { color: #000; }
      #willet-main .link a:hover { text-decoration:underline; }
      #willet-main a span {
          visibility: hidden;
          text-align: center;
          width: 171px;
          display: block;
          padding: 3px;
  
      }
  
      #willet-main a:hover span { visibility: visible; font-size: 12; }
  
      #willet-main #darkbg {  background: #4a4a4a; }
  
      #willet-main #buttons { position: absolute; bottom: 10; }
  
      #willet-main #buttons img {
          width: 139px;
      }
  
      #willet-main .overlay{
          display: none;
          position: fixed;
          top: 0%;
          left: 0%;
          width: 100%;
          height: 100%;
          background: rgba(255,255,255,0.7);
          z-index:1001;
          cursor: -webkit-zoom-out;
          cursor: -moz-zoom-out;
          cursor: zoom-out;
      }
  
      #willet-main #light {
          width: 1000px;
          margin: auto;
          display: none;
          text-align: left !important;
      }
      #willet-main .box-content {
          position: fixed;
          margin: auto;
          top: 50px;
          left: 50%;
          width: 600px;
          margin-left: -300px;
          /* we would set top margin, but don't know the value */
          padding: 30px 30px 30px 55px;
          background: #fff;
          z-index:1002;
          border: 1px solid #cecece;
  
          -moz-box-shadow: 0px 8px 16px 0px #cecece;
          -webkit-box-shadow: 0px 8px 16px 0px #cecece;
          -o-box-shadow: 0px 8px 16px 0px #cecece;
          box-shadow: 0px 8px 16px 0px #cecece;
      }
  
      #willet-main h3 {
          font-size: 30px;
          margin: 0;
          padding: 0;
          margin-top: 10px;
      }
      #willet-main h4 {
          font-size: 23px;
          margin: 0;
          padding: 0;
          margin-bottom: 5px;
      }
  
  
      #willet-main #product-banner {
          display: inline-block;
          width: 700px;
          margin: 15px 15px 15px;
          border: 1px solid #aaaaaa;
          box-shadow: 0 2px 5px rgba(0,0,0, 0.3);
          background: #fff;
          position: relative;
          text-align: center;
      }
      #willet-main .column {
          float: left;
          width: 200px;
          text-align: center;
      }
  
      #willet-main #light .content,
      #featured-product .content  {
          width: 550px;
          margin-right: 40px;
      }
  
      #willet-main #light .text {
          text-align: left;
          width: 380px;
          float: left;
      }
  
      #willet-main #light .buttons {
          float: right;
          text-align: right;
          padding-top: 30px;
      }
  
      #willet-main #light .buttons div {
          margin-bottom: 12px;
      }
  
      #willet-main #light .x {
          color: #ccc;
          float: right;
          top: 0;
          font-size: 30px;
          margin-right: 10px;
      }
  
      #willet-main #light .x:hover {
          color: #666;
          cursor: pointer;
      }
      #willet-main #light .social {
          clear: right;
          float: right;
          margin-top: 100px;
          text-align: left !important;
          width: 80px;
      }
      #willet-main #light .social>div {
          margin-top: 10px;
      }
  
      #willet-main .click {
          cursor: pointer;
          cursor: -webkit-zoom-in;
          cursor: -moz-zoom-in;
          cursor: zoom-in;
      }
  
      #willet-main .pin.small {
          height: 150px;
      }
  
      #willet-main .pin.medium {
          height: 200px;
      }
  
      #willet-main .pin.large {
          height: 250px;
      }
  
      #willet-main .pin.x-large {
          height: 300px;
      }
      #willet-main a.willet-pinterest-button {
          background-image: url('http://assets.pinterest.com/images/pinit6.png');
          background-position: 0 -7px;
      }
      #willet-main a.willet-pinterest-button:hover { background-position: 0 -28px; cursor: pointer; }
      #willet-main a.willet-pinterest-button:active { background-position: 0 -49px; cursor: pointer; }
      #willet-main a.willet-pinterest-button.clicked { background-position:0 -70px !important; }
  
      #featured-product {
          /* CSS applied by JQuery so it remains invisible when not in use */
      }
      #featured-product #bento-logo {
          float: left;
          margin: 10px 0 0 30px;
          width: 70px;
          height: 240px;
      }
      #featured-product #bento-logo>a {
          text-decoration: none;
      }
      #featured-product #bento-logo img {
          width: 70px;
          height: 240px;
      }
      #featured-product>#featured_img {
          margin-left: 25px;
      }
       #featured-product>#featured_img,
       #featured-product>#featured_img>img {
          width: 320px;
          height: 240px;
      }
      #featured-product>#featured_img {
          float:left;
          background: #cecece;
          position: relative;
          text-align: center;
          overflow: hidden;
          -moz-box-shadow: 0px 8px 16px 0px #cecece;
          -webkit-box-shadow: 0px 8px 16px 0px #cecece;
          -o-box-shadow: 0px 8px 16px 0px #cecece;
          box-shadow: 0px 8px 16px 0px #cecece;
      }
      #featured-product .text {
          padding-left: 490px;
          text-align: left;
          padding-top: 30px;
      }
      #featured-product #featured_social {
          padding-top: 30px;
      }
      #featured-info {
  
      }
  </style>
  <!--[if IE 8]>
  <style type="text/css">
      #willet-main .pin { margin: 10px; vertical-align: top; }
  </style>
  <![endif]--><!--[if IE 7]>
  <style type="text/css">
      #willet-main .pin { margin: 10px; vertical-align: top; float: left; }
      #willet-main .pin-title { left: 0px !important; }
  </style>
  <![endif]-->
  
  <div id="willet-main">
    <div id="wrapper">
      <div id="featured-product"></div>
      <div style="clear:both"></div>
      <div class="column" id="0"></div>
      <div class="column" id="1"></div>
      <div class="column" id="2"></div>
      <div class="column" id="3"></div>
      <div id="light">
        <div class="box-content">
          <div class="x">
                      x
                  </div>
          <div class="social">
            <div class="pinterest_buttons"></div>
            <div class="twitter_buttons"></div>
            <div class="fb_buttons"></div>
          </div>
        <a class="link"><img id="light_img" /></a>
          <div class="content">
            <div class="text">
              <h3><a id="light_title" class="link">Title goes here</a></h3>
              <h4 id="light_price"></h4>
              <p id="light_desc"></p>
            </div>
            <div class="buttons">
              <div class="buy"><a id="light_buy"><img src="https://static.shopify.com/s/files/1/0029/8962/t/8/assets/willet-buynow.png?106515" /></a></div>
            </div>
          </div>
        </div>
      </div>
      <div id="fade" class="overlay"></div>
    <!-- End light box -->
      <div id="fb-root"></div>
  
      </div>
  </div>
  
  <script type="text/javascript">
      $(document).ready(function () {
          // Assume we have an array of data objects
          // {title, desc, link, imgs[]}
          var products = {
              'ahiru-picks': {
                  'title': 'Ahiru Picks',
                  'desc': 'an adorable set of 10 duck picks!',
                  'link': 'http://en.bentoandco.com/products/ahiru-picks',
                  'imgs': [
                      [ 'ahiru_pick_2_large.jpg', '-60%', '-30%' ],
                      [ 'ahiru_pick_4_large.jpg', '-50%', '-35%' ],
                      'ahiru_pick_6_large.jpg'
                  ],
                  'id': '206073312',
                  'price':'$4.16 USD',
                  'fb_url': 'https://www.facebook.com/BentoAndCoAhiruPicks'
              }
          };
  
          var size = ["small", "x-large", "medium", "large","large"];
  
          $("#fade, .x").click(function(){
              $("#light").fadeOut(100);
              $("#fade").fadeOut(100);
          });
  
          // Setup some analytics handlers
          $("#light .link").has("#light_img").unbind('click').bind('click', function() {
              // Visit product page via 'image'
              // Not sure if this is strictly necessary
              _gaq.push(["_trackEvent", "Product", "Details", "Image"]);
          });
          $("#light #light_title.link").unbind('click').bind('click', function() {
              // Visit the product page via 'title'
              // Not sure if this is strictly necessary
              _gaq.push(["_trackEvent", "Product", "Details", "Title"]);
          });
          $("#light p .link").unbind('click').bind('click', function() {
              // Visit the product page via 'view details'
              // Not sure if this is strictly necessary
              _gaq.push(["_trackEvent", "Product", "Details", "View Details"]);
          });
  
          var getCSSNumericValue = function ($elem, rule) {
              // Get pixel value, remove 'px' from end of string, convert to a number
              return Number($elem.css(rule).substring(0, $elem.css(rule).length - 2));
          };
  
          var registerShare = function (network) {
              _gaq.push(["_trackEvent", "Product", "Share", network]);
          };
  
          var generateFacebookButton = function (data) {
              var container = $("<div>", {
                  "css"    : {"display": "none"},
                  "data-id": data.title
              });
  
              var link = $("<div>", {
                  "data-href"      : data.fb_url,
                  "data-send"      : "false",
                  "data-layout"    : "button_count",
                  "data-width"     : "100",
                  "data-show-faces": "false",
                  "data-ref"       : "f",
                  "class"          : "fb-like"
              });
  
              container.append(link);
              return container;
          };
  
          var generateTwitterButton = function (data) {
              var container = $("<div>", {
                  "css"    : {"display": "none"},
                  "data-id": data.title
              });
  
              var twitter_url = "https://twitter.com/share?" +
                      "counturl=" + encodeURIComponent(data.link) +
                      "&url=" + encodeURIComponent(data.link + "?r=t") +
                      "&text=" + data.title;
  
              var link = $("<a>", {
                  "href": twitter_url,
                  "class": "twitter-share-button",
                  "text": "Tweet"
              });
  
              container.append(link);
              return container;
          };
  
          var generatePinterestButton = function(data, index) {
              var img = data.imgs[0];
              // TODO: Change image_url
              var image_url = "http://cdn.shopify.com/s/files/1/0029/8962/products/" + ($.isArray(img) ? img[0] : img);
  
              var buttonContainer = $("<div>", {
                  "css": {
                      "width"        : "90px",
                      "margin"       : "0px",
                      "padding"      : "0px",
                      "paddingBottom": "10px",
                      "float"        : "left",
                      "border"       : "0px none",
                      "height"       : "21px",
                      "overflow"     : "hidden",
                      "position"     : "relative"
                  },
                  "data-id": data.title
              });
  
              var link = $("<a>", {
                  'class': 'willet-pinterest-button',
                  'text': "Pin It"
              });
  
              link.css({
                  'position'  : 'absolute',
                  'top'       : '0px',
                  'left'      : '0px',
                  'font'      : "11px Arial, sans-serif",
                  'textIndent': "-9999em",
                  'fontSize'  : ".01em",
                  'color'     : "#CD1F1F",
                  'height'    : "20px",
                  'width'     : "43px",
                  'zIndex'    : "1"
              });
  
              link.click(function(){
                  registerShare("Pinterest");
                  window.open("http://pinterest.com/pin/create/button/" +
                          "?url=" + encodeURIComponent(data.link + "?r=p") +
                          "&media=" + encodeURIComponent(image_url) +
                          "&description=" + encodeURIComponent("Bento & Co - " + data.title));
                  link.attr("class", "willet-pinterest-button clicked");
              });
              buttonContainer.append(link);
  
              var count = $('<div>', {
                  "css": {
                      'position': 'relative',
                      'zIndex':  "0",
                      'height': "20px",
                      'width': '77px'
                  }
              });
  
              var countLink = $("<a>", {
                  "href": "http://pinterest.com/pin/create/button/" +
                          "?url=" + encodeURIComponent(data.link) +
                          "&media=" + encodeURIComponent(image_url) +
                          "&description=" + data.desc,
                  "class": 'pin-it-button',
                  'count-layout': 'horizontal'
              });
  
              count.append(countLink);
              buttonContainer.append(count);
  
  
              return buttonContainer;
          };
  
          var showPin = function () {
              var data = $(this).data();
              $("#light_title").text(data.title);
              $("#light_desc").text(data.desc);
              $("#light_img").attr("src", ( $.isArray(data.img) ? data.img[0] : data.img ));
              $("#light .link").attr("href", data.link);
  
              var buy_url = "http://en.bentoandco.com/cart/" + data.buy +":1";
              $("#light_buy").attr("href", buy_url);
              $("#light_price").text(data.price);
  
              // Setup any tricky handlers that could change...
              $("#light_buy").unbind("click").bind("click", function () {
                  _gaq.push(["_trackEvent", "Product", "Buy Now", data.title]);
              });
  
              //_gaq.push(["_trackEvent", "Category", "Action", "opt_label", "opt_value"]);
              _gaq.push(["_trackEvent", "Product", "Preview", data.title]);
  
              $(".pinterest_buttons>div").hide();
              $(".pinterest_buttons div[data-id='" + data.title + "']").show();
  
              $(".twitter_buttons>div").hide();
              $(".twitter_buttons div[data-id='" + data.title + "']").show();
  
              $(".fb_buttons>div").hide();
              $(".fb_buttons div[data-id='" + data.title + "']").show();
  
              $("#fade").fadeIn(100);
              $("#light").fadeIn(100);
  
              var $box = $(".box-content");
              var box_height = 490 + getCSSNumericValue($box,'padding-top') + getCSSNumericValue($box,'padding-bottom');
              $box.css('top', ($(window).height() - box_height) / 2 );
          };
  
          var generatePin = function(name, data, image_index) {
              var img = data.imgs[image_index];
              var image_url = "http://cdn.shopify.com/s/files/1/0029/8962/products/" + ($.isArray(img) ? img[0] : img); 
  
              var outerDiv = $("<div>", {
                  "class"      : "pin click",
                  "data-pin-id": name,
                  "data-title" : data.title,
                  "data-desc"  : data.desc,
                  "data-link"  : data.link,
                  "data-img"   : image_url,
                  "data-price" : data.price,
                  "data-buy"   : data.id,
                  "click"      : showPin
              });
  
              var innerDiv = $("<div>", { "class": 'inner-pin' });
  
              var title     = $("<h5>", {
                  "class": 'pin-title',
                  "text" : data.title
              });
  
              var image_div = $("<div>", { "class": 'pinimg' });
              var image     = $("<img>", { "src": image_url });
              image.css({
                  "marginLeft": ( $.isArray(img) ? img[1] : "-50%" ),
                  "marginTop" : ( $.isArray(img) ? img[2] : "0" )
              });
  
              image_div.append(image);
  
  
              innerDiv.append(title);
              innerDiv.append(image_div);
  
              outerDiv.append(innerDiv);
  
              return outerDiv;
          };
  
          var generateFeaturedProduct = function(name, featured) {
              // Generate featured product html
              // 1st generate logo
              var bento_logo = $("<div>", { 'id': 'bento-logo' }).html(""
                  +"<a href='http://en.bentoandco.com'>"
                  +"    <img src='https://static.shopify.com/s/files/1/0029/8962/t/8/assets/bco-logo-vertical.png?106591' /></img>"
                  +"</a>");
  
              // 2nd generate product image
              var img = featured.imgs[0];
              var image_url = "http://cdn.shopify.com/s/files/1/0029/8962/products/" + ($.isArray(img) ? img[0] : img);
              var feat_product = $('#featured-product').hide();
              var feat_img_container = $("<div>", {
                  "class"      : "click",
                  "id"         : "featured_img",
                  "data-pin-id": name,
                  "data-title" : featured.title,
                  "data-desc"  : featured.desc,
                  "data-link"  : featured.link,
                  "data-img"   : image_url,
                  "data-price" : featured.price,
                  "data-buy"   : featured.id,
                  "click"      : showPin
              });
              var feat_img = $("<img>", {
                  'src': image_url
              });
              feat_img_container.append(feat_img);
  
              // 3rd generate product information
              var feat_text = $("<div>", { 'class': 'text' }).html(""
                      +"<h3><a id='featured_title' class='link'>Title goes here</a></h3>"
                      +"<h4 id='featured_price'></h4>"
                      +"<p id='featured_desc'></p>"
                      +"<div id='featured_social'></div>");
  
              // Append everything to DOM
              feat_product.append(bento_logo, feat_img_container, feat_text);
              feat_product.css('margin', '30px 0').css('height', '240px');
  
              // Add social buttons
              $("#featured_title").text(featured.title).attr("href", featured.link);
              $("#featured_desc").text(featured.desc);
              $("#featured_price").text(featured.price);
              $('#featured_social').append(
                  generateFacebookButton(featured),
                  generatePinterestButton(featured),
                  generateTwitterButton(featured)).children().css('display','block').css('float','left').css('min-width', '100px');
  
  
              // Transition header to featured product
              $('.header').hide('blind');
              $('.title').hide('blind');
              $('.main-menu').hide('blind');
              feat_product.show('blind');
          };
  
          // Generate social sharing buttons
          $.each(products, function(name, data) {
              // Generate all the Pinterest buttons. This is goofy, but easy.
              $(".pinterest_buttons").append(generatePinterestButton(data));
              // Generate all the Twitter buttons. This is goofy, but easy.
              $(".twitter_buttons").append(generateTwitterButton(data));
              // Generate all the Facebook buttons. This is goofy, but easy.
              $(".fb_buttons").append(generateFacebookButton(data));
          });
  
          // Generate layout
          var count = 0;
          $.each([0,1,2], function(index) {
              $.each(products, function(name, data) {
                  var pin = generatePin(name, data, index);
                  pin.addClass(size[count % size.length]); // Randomly size
  
                  $('.column#'+(count%4)).append(pin);
  
                  count++;
              });
          });
  
          // Generate featured product if url has hash fragment
          var hash = window.location.hash && window.location.hash.substring(1);
          if (hash && products.hasOwnProperty(hash)) {
              // Generate featured product
              generateFeaturedProduct(hash, products[hash]);
          }
  
          // load scripts
          var scripts = [
              {
                  "script": "http://assets.pinterest.com/js/pinit.js"
              },
              {
                  "script": "http://platform.twitter.com/widgets.js",
                  "onload": function() {
                      twttr.events.bind('tweet', function(event) {
                          registerShare("Twitter");
                      });
                  }
              },
              {
                  "script": "http://connect.facebook.net/en_US/all.js#xfbml=1",
                  "onload": function() {
                      FB.Event.subscribe('edge.create', function(response) {
                          registerShare("Facebook");
                      });
                  }
              }
          ];
  
          var item, script;
          for (var i=0; i < scripts.length; i++) {
              item = scripts[i];
  
              script = document.createElement("script");
              script.src = item.script;
              script.onload = item.onload;
              document.body.appendChild(script);
          }
      });
  
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'TRACKING_CODE']);
      _gaq.push(['_setDomainName', 'DOMAIN_NAME']);
      _gaq.push(['_trackPageview']);
  
      (function() {
          var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
          ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
          var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
  </script>

  • Add the following snippet to the product page to capture ordinary social shares for Twitter and Facebook:

      <script>
  (function () {
      var existing_onload = window.onload;
      window.onload = function () {
          try {
              existing_onload();  // call old one
          } catch (e) { /* in case there wasn't an onload */ }
              
  
          var fb_loaded, tw_loaded;
          var debug = function (msg) {
              if (window && window.console && window.console.log) {
                  window.console.log(msg);
              }
          };
  
          // set up analytics
          try {
              var willetTracker = _gat._getTracker('TRACKING_CODE');
              if (!willetTracker) {
                  debug('willetTracker failed to initialize');
                  return;
              }
              willetTracker._setDomainName("bentoandco.com");
              willetTracker._setAllowLinker(true);
              willetTracker._initData();
              willetTracker._trackPageview();
          } catch (e) {
              debug(e);
          }
  
          // check every second to see if FB exists
          setInterval(function () {
              try {
                  // https://developers.google.com/analytics/devguides/collection/gajs/gaTrackingSocial
                  // (modified)
                  if (typeof FB !== 'undefined' && !fb_loaded) {
                      debug('Got FB!');
                      FB.Event.subscribe('edge.create', function (targetUrl) {
                          debug('FB like detected!');
                          willetTracker._trackSocial('facebook', 'like', targetUrl);
                      });
                      FB.Event.subscribe('edge.remove', function (targetUrl) {
                          debug('FB unlike detected!');
                          willetTracker._trackSocial('facebook', 'unlike', targetUrl);
                      });
                      FB.Event.subscribe('message.send', function (targetUrl) {
                          debug('FB send detected!');
                          willetTracker._trackSocial('facebook', 'send', targetUrl);
                      });
                      fb_loaded = true;  // unset flag
                  } else {
                      // debug('No FB');
                  }
              } catch (err) {
                  debug('Willet is doing it wrong: ' + err);
              }
          }, 1000);
  
          // check every second to see if twttr exists
          setInterval(function () {
              try {
                  // (modified)
                  if (typeof twttr !== 'undefined' && !tw_loaded) {
                      var extractParamFromUri = function (uri, paramName) {
                          if (!uri) {
                              return;
                          }
                          var regex = new RegExp('[\\?&#]' + paramName + '=([^&#]*)');
                          var params = regex.exec(uri);
                          if (params != null) {
                              return unescape(params[1]);
                          }
                          return;
                      };
                      var trackTwitter = function (intent_event) {
                          if (intent_event) {
                              var opt_pagePath;
                              if (intent_event.target && intent_event.target.nodeName == 'IFRAME') {
                                  opt_pagePath = extractParamFromUri(intent_event.target.src, 'url');
                                  debug('opt_target = ' + opt_pagePath);
                              }
                              debug('tracked tweet ' + opt_pagePath);
                              willetTracker._trackSocial('twitter', 'tweet', opt_pagePath);
                          } else {
                              debug('no intent_event?!');
                          }
                      };
  
                      // Wrap event bindings - Wait for async js to load
                      twttr.ready(function (twttr) {
                          twttr.events.bind('tweet', trackTwitter);
                          debug('bound tweet event!');
                      });
                      tw_loaded = true;  // unset flag
                  } else {
                      // debug('No twttr');
                  }
              } catch (err) {
                  debug('Willet is doing it wrong: ' + err);
              }
          }, 1000);
      };
  })();
  </script>
Add a custom footer
Add a custom sidebar

Clone this wiki locally