1. First Step

Insert Tracking code into your site

Here is a sample tracking code.

<script>
	(function(g,r,a,v,i,t,y){
		g[a]=g[a]||[],y=r.createElement(v),
		g=r.getElementsByTagName(v)[0];y.async=1;
		y.src='//'+i+'/js/'+t+'/gr_reco5.min.js';
		g.parentNode.insertBefore(y,g);y=r.createElement(v),y.async=1;
		y.src='//'+i+'/grrec-'+t+'-war/JSServlet4?cc=1';
		g.parentNode.insertBefore(y,g);
	})(window, document, '_gravity','script', 'testgabor.yusp.com', 'testgabor');
</script>

View and Browse event tracking

To set up BROWSE and VIEW events tracking for our clients is Obligatory.

Every BROWSE on the site and each visit on the specific pages will trigger a VIEW event sending to your instance.

ADD PAGES

0. Open CHANNELS and go to menu Web / PAGES.
1. Click on the plus icon at the top right corner.
2. Give a name to your Page Type
3. Copy and paste the target page URL

4. Add a regexp* to your the Page Type
5. Add item properties to your site. Item catalog is synchronized by collecting the product information from your webpage. Here you can define which information should be added to the catalog and where is it located on your site
6. Additional scripts. Add the following snippet to your pages.

var itemId = document.getElementsByClassName('sku');
if (itemId) {
  _gravity.push({
    type: 'event',
    eventType: 'VIEW',
    itemId: itemId[0].innerText
  });
}

+1. Click on Save!

*Regexp is extremely useful descriptive langue that helps our engine to recognize specific Page Types. If you are not familiar with it please take a look at that quick course that helps you to understand it: https://regexone.com - it takes 20 minutes.

ADD PAGES - EXAMPLE: PRODUCT PAGE

1. Click on the plus icon at the top right corner
2. Give a name to that Page for example itemPage
3. Enter a product page URL. (similar to "http://examplesite/index.php/product/")
4. Switch to Item Properties Tab and add a new. That should be itemId/ meta[name='itemId'] / Content() for now as a default, you don't have to customize it.
5. Change Page detection by adding a new URL regexp: "./product/." (without quotes)
6. Switch your tab from Integration to Scripts on the selected Page Type and add the following snippet:

var itemId = document.getElementsByClassName('sku');
if (itemId) {
  _gravity.push({
    type: 'event',
    eventType: 'VIEW',
    itemId: itemId[0].innerText
  });
}

5. Save it.

Buy Event tracking

By default, we track only 3 event types:

View Events and Browse Events that we've covered in the previous topic.
Rec Click Events: when an item in a recommendation box is clicked on.

In order to track purchases on a site as well, we need to implement a Buy Tracking Code. It is highly recommended that you implement buy tracking for Yusp, because:

• "Buy events" represent valuable, additional information that Yusp can use to empower further increases in the accuracy of your recommendations.
• By implementing buy tracking, you can track important additional metrics, such as revenue through recommendations / all revenues.

Add Yusp Tracking Code

Make sure your general Yusp Tracking Code is inserted into the header section of your checkout complete (or thank you) page.

Edit and paste the following script into the checkout complete page of your website:

<script>
var _gravity = _gravity || [];
 // one buy event for each product bought
 _gravity.push({type: "event", eventType: "BUY", itemId: "12", unitPrice: "49", quantity: "1", orderId: "ord1118"});
 _gravity.push({type: "event", eventType: "BUY", itemId: "23", unitPrice: "5.25", quantity: "2", orderId: "ord1118"});
</script>

Ideally, the script above generates one object per one item bought, which constitutes one Yusp buy event. These will be stored in your event database, alongside other events.

Another solution via Google Data Layer

In case you are using Google Data Layer in your Success Page, use the following template and place it after the data layer, or implement through Tag Manager:

<script>
var _gravity = _gravity || [];
dataLayer.forEach(function(o, i) {
   if(o["event"] === "transaction") {
      o["transactionProducts"].forEach( function (k, i) {
        _gravity.push({type: "event", eventType: "BUY",  itemId: k["sku"], unitPrice: k["price"], quantity: k["quantity"], orderId: o["transactionId"]});
       });
  }
});
</script>

Product structure definition