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
Before you install TasteHit, your profile will look like this when you are logged in:
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
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
Once the snippet is inserted and we see data being collected on our side, your profile page will look like this:
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:
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
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:
- 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.
- 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.