Installation Procedure

Overview

TasteHit is a Software-as-a-Service predictive marketing technology. This makes it very simple to install and use as there is almost nothing to change on your side and all the heavy work is done on TasteHit's servers. To install TasteHit, you need to follow these steps:

  • Create an account at tastehit.com/signup
  • Click on the link in the confirmation email we sent you to verify your email address
  • Insert a piece of code (Javascript tag) on your shop's pages.

Tag insertion

Once your account is created and your email verified you will need to insert a snippet of code on all the pages of your shop. This snippet, also called "Tag", or "Javascript tag", will collect behavioral data and, based on this data, display product selections in real-time as your visitors browse through your shop. Without this tag inserted, TasteHit has no information to process and cannot display product selections on your pages.

Before you install TasteHit, your profile will look like this when you are logged in: Tag not inserted

To insert the tag, you need to copy the piece of code you will find on your account's profile page and paste it inside the pages of your shop. If you use a standard CMS such as Magento, Prestashop or Shopify, you simply need to add the snippet in one of the templates of your pages, ideally at the end of the HTML code before the closing </body> tag.

Before inserting the tag, your HTML pages will have the following structure:

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
  <head>
    <title>Your awesome site's title</title>
  </head>
  <body>
    [...Loads of stuff here...]
  </body>
</html>

After inserting the TasteHit JS snippet, it will look like this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
  <head>
    <title>Your awesome site's title</title>
  </head>
  <body>
    [...Loads of stuff here...]

    <script type="text/javascript">
    var _thq = _thq || [];
    _thq.push(['setId', 'CustomerX']);
    _thq.push(['trackPageView']);
    _thq.push(['trackEvents']);
    _thq.push(['detectChanges']);
    _thq.push(['displaySmartMenu']);

    (function() {
      var th=document.createElement('script');th.type='text/javascript';th.async=true;th.src=('https:'==document.location.protocol?'https://':'http://')+'www.tastehit.com/static/th.js';var s=document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(th, s);
    })();
    </script>
  </body>
</html>

Once the snippet is inserted and we see data being collected on our side, your profile page will look like this: Tag inserted

Congratulations, you finished the first step, now you can configure the catalog import here.

Under the hood (technical)

If you want to understand more about how TasteHit works, read further. TasteHit’s application is made of two parts communicating with each other:

  • The asynchronous Javascript snippet described above, which is placed on the customer’s site and interacts with TasteHit’s servers.
  • TasteHit’s servers presenting an API which respond to requests sent from Javascript snippets inserted in customer websites.

The Javascript snippet loads the TasteHit Javascript library in an asynchonous way each time a visitor loads a page from one of our customers' sites.

For a customer called “CustomerX”, the code to insert in his site would be the following:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<script type="text/javascript">
 var _thq = [];
 _thq.push(['setId', 'CustomerX']);
 _thq.push(['setThUrl', 'https://www.tastehit.com']);
 _thq.push(['trackPageView']);
 _thq.push(['trackEvents']);
 _thq.push(['displayWidget']);
 (function() {
 var th = document.createElement('script'); th.type = 'text/javascript';
 th.async = true;
 th.src = 'https://www.tastehit.com/static/th.js';
 var s = document.getElementsByTagName('script')[0];
 s.parentNode.insertBefore(th, s);
})();
</script>

This code initiates various requests to TasteHit’s servers every time a page is loaded. The most important action the snippet performs is the following sequence:

  1. It looks for the HTML code <div class=”thRecommendations” data-widgetid=”test”></div> inside the customer’s HTML page. If it doesn’t find it, nothing happens.
  2. If it does find it, it inserts an iframe containing graphical product selections into the HTML markup. The markup previously found will then look like:
    1
    2
    3
    4
    <div class=”thRecommendations” data-widgetid=”test”> <iframe
    src="https://www.tastehit.com/api/CustomerX/r/aHR0cDovL3d3dy5teWR yZXNzY29kZS5mci92ZW50ZXMvcnVlZGVsYW1vZGUvZnIvZG1xX3Byb2R1aXQuYXNweD9jcD1DTzEzUFItQTAwOF9OT0lS?widgetid=test" width="256px" height="526px" id="thiframe" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" seamless="">
    [...] </iframe>
    </div>
    

Graphically, it will render a list of product pictures, based on several different parameters (visitor's browsing history, context, merchant configuration). This list of personalized product selections is therefore displayed on every page in which the code <div class=”thRecommendations”data-widgetid=”test”></div> is present.

This way of adding dynamic content inside the page is especially convenient for marketers as very little integration effort is required (tag insertion and product feed configuration. If you want to create custom features, or use TasteHit as a backend technology or inside a native mobile app, you can do most of what is described here using the TasteHit API.

Comments