Personalization Framework

Purpose

The Personalization Framework was designed to efficiently deliver recommendation widgets across the site with flexibility and speed.

Background

As the Personalization program gained momentum, the frequency of requests for new and diverse recommendation widgets increased. The initial challenge was to efficiently deliver these widgets which were being treated as a standalone feature injected through the experimentation tool, which resulted in unnecessary bloat. To address this, I developed a framework to power the individual widgets.

Subsequently, the focus shifted to creating a dynamic output from a product feed. Using Velocity and Adobe Target Designs, I developed a dynamic engine capable of parsing Adobe or GCP feeds and generating product outputs. Additionally, the design team sought flexibility in visual treatment. By utilizing data to guide the templating engine, business users gained a broad range of options to adjust the visual aspects of each recommendation.

Technical Details

Adobe Target Design | Velocity Template

#set($iter = 0)
  #foreach($e in $entities)
    #if($e.id != "" && $e.thumbnailUrl != "" && $foreach.count < $entities.size() && $iter < $limit)
      #set($iter = $iter + 1)
      #set($id = $e.id)
      #set($url = "${e.PageURL}&${tracking}_${e.gender}_${id}")
      #set($url = $url.replaceAll("https://www.ae.com",""))
      #set($name = $e.name.replaceAll("%20"," ").replaceAll("%24","\\\$").replaceAll("%25","%").replaceAll("%21","!").replaceAll("%26","&").replaceAll("_"," "))
      #set($thumb = $e.thumbnailUrl.replaceAll('qv-450','cat-main_large'))
      #set($value = $e.value)
      #set($sale = $e.Onsale)

      <div class="awo-rec-section">
        <a href="$url" class="awo-rec-product">
          <img src="$thumb" alt="$name"/>
        </a>
        <div class="awo-rec-info">
          <span class="awo-rec-qv qv-btn-wrapper">
            <button type="button" onclick="$(document).trigger('show.quickview',{productId:'${id}'});" class="quickview-product quickview-product-btn hidden-xs hidden-sm">
              <span class="hidden">Launch product quickview</span>
              <span class="aeoicon aeoicon-add"></span>
            </button>
          </span>
          <a href="$url" class="awo-rec-equity #if($sale != $value) awo-rec-on-sale #end" data-id="$id">
            <div class="awo-rec-name">$name</div>
            <span class="awo-rec-price">$$value</span><span class="awo-rec-sale-price">$$sale</span>
          </a>
        </div>
      </div>

    #end
  #end
    

GCP Powered Recommendation

awo.at.widgets.xts = {
  "globalSettings":{
    "url":"https://us-east1-aeo-data-engineering-test.cloudfunctions.net/reco-v1"
  },
  "MoreLooksToLove": {
    "settings": {
      "params": {
        "prodId":"${mbox.entity.id}",
        "catId":"${mbox.entity.categoryId}"
      },
      "elemid": "awo_ml2l",
      "tag": "mltl_pdp",
      "loc": "#awo_more_looks_to_love",
      "placement": "insertBefore",
      "layout": "carousel",
      "limit":"16",
      "partial":"",
      "view": 4,
      "constrained": "true",
      "arrows": "out",
      "border": "",
      "header": "center",
      "title":"More Looks To Love",
      "copy": "", 
      "gender": "",
      "type": "more-looks-to-love",
      "preset": "_of"
    }
  }
}
    

Including BazaarVoice Ratings

function fetchRatings(products,settings){ 
awo.debug('Fetch Product Ratings','violet');
  var prodIds = '';

  for(var i=0; i < products.length; i++){
    var product = products[i].product;
    prodIds += product.id + (i !== products.length - 1 ? ',' : '');
  }

  $.getJSON('https://api.bazaarvoice.com/data/products.json?apiversion=5.4&passkey=__&filter=id:'+ prodIds +'&Filter_Reviews=IsRatingsOnly:eq:false&Sort_reviews=Rating:desc&limit_reviews=1&include=reviews&stats=Reviews&callback=?', function(json){
    addAttributes(products,settings,json);
  });
}