Skip to content

Pinpoint Experiments

Jump to bottom Edit New page
nt3rp edited this page Sep 18, 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);
          }
      });
  </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>

  • You'll also need to ensure the tracking code is added to the checkout pages, and most pages of the site. This can be done in the following way. Add the following snippet to both theme.liquid, and to the Additional Content & Scripts section of Preferences > Checkout & Payment

      <script type="text/javascript">
      // set up analytics
      var debug = function (msg) {
          if (window && window.console && window.console.log) {
              window.console.log(msg);
          }
      };

      var setupTracker = function (tracking_code, domain_name) {
          var willetTracker = _gat._getTracker(tracking_code);
          if (!willetTracker) {
              debug('willetTracker failed to initialize');
              return;
          }
          willetTracker._setDomainName(domain_name);
          willetTracker._setAllowLinker(true);
          willetTracker._initData();
          willetTracker._trackPageview();
      };

      var loadAnalytics = function(callback) {
          if(!callback) {
              callback = function() {};
          }

          (function() {
              var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
              ga.onload  = callback;
              ga.onerror = function (e) { debug(e) };
              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);
          })();
      }

      try {
          setupTracker('CODE', 'DOMAIN')
      } catch (e) {
          try {
              loadAnalytics(function(){
                  setupTracker('CODE', 'DOMAIN')
              });
          } catch (e2) {
              debug(e);
          }
      }
  </script>

  • Add the following to the theme.liquid of the store to set up the OpenGraph tags. Make sure that there are no duplicates, as that could cause problems.

      {% if template contains 'product' %}
    <link rel="canonical" href="{{ canonical_url | downcase }}" />
    <meta property="og:url" content="{{ canonical_url | downcase }}" />
  {% else %}
    <link rel="canonical" href="{{ canonical_url | downcase }}" />
    <meta property="og:url" content="{{ canonical_url | downcase }}" />
  {% endif %}
  
  <meta property="fb:app_id" content="FB_ID">
  <meta property="og:type" content="product">
  <meta property="og:site_name" content="{{ shop.name | escape }}" />
  
  {% if template == 'index' %}
  <title>{{ shop.name }}</title>
  <meta property="og:title" content="{{ shop.name }}" />
  {% elsif template == '404' %}
  <title>Page Not Found | {{ shop.name | escape }}</title>
  <meta property="og:title" content="Page not found" />
  {% else %}
  <title>{{ page_title }} | {{ shop.name | escape }}</title>
  <meta property="og:title" content="{{ page_title }}" />
  {% endif %}
  
  {% assign maxmeta = 155 %}
  {% if template contains 'product' %}
  <meta name="description" content="{{ product.description | strip_html | strip_newlines | truncate: maxmeta | escape }}" />
  <meta property="og:description" content="{{ product.description | strip_html | strip_newlines | truncate: maxmeta | escape }}" />
  {% elsif template contains 'page' %}
  <meta name="description" content="{{ page.content | strip_html | strip_newlines | truncate: maxmeta | escape }}" />
  <meta property="og:description" content="{{ page.content | strip_html | strip_newlines | truncate: maxmeta | escape }}" />
  {% elsif template == 'index' and shop.description != '' %}
  <meta name="description" content="{{ shop.description | strip_html | strip_newlines | truncate: maxmeta | escape }}" />
  <meta property="og:description" content="{{ shop.description | strip_html | strip_newlines | truncate: maxmeta | escape }}" />
  {% endif %}
  
  
  {% comment %}
  Open Graph tags for Facebook Like buttons
  {% endcomment %}
  {% if template contains 'product' %}
  <meta property="og:image" content="{{ product.featured_image | product_img_url: 'original' }}" />
  {% else %}
  {% if settings.logo_image == "logo.png" %}
    <meta property="og:image" content="{{ 'logo.png' | asset_url }}" />
  {% endif %}
  {% endif %}

  • Create a new Facebook app for the site, and include it's facebook app id (above)

Add a custom footer
Add a custom sidebar

Clone this wiki locally