Insert Recently Viewed Items into an Email

read

Overview

For several integrations, Klaviyo's Viewed Product tracking snippet also includes Recently Viewed Product tracking.  For example, in a Shopify integration, this snippet looks like the following, with the Recently Viewed Product tracking highlighted:

<script text="text/javascript">
 var _learnq = _learnq || [];
 var item = {
   Name: {{ product.title|json }},
   ProductID: {{ product.id|json }},
   Categories: {{ product.collections|map:'title'|json }},
   ImageURL: "https:{{ product.featured_image.src|img_url:'grande' }}",
   URL: "{{ shop.secure_url }}{{ product.url }}",
   Brand: {{ product.vendor|json }},
   Price: {{ product.price|money|json }},
   CompareAtPrice: {{ product.compare_at_price_max|money|json }}
 };

 _learnq.push(['track', 'Viewed Product', item]);

 _learnq.push(['trackViewedItem', {
   Title: item.Name,
   ItemId: item.ProductID,
   Categories: item.Categories,
   ImageUrl: item.ImageURL,
   Url: item.URL,
   Metadata: {
     Brand: item.Brand,
     Price: item.Price,
     CompareAtPrice: item.CompareAtPrice
   }
 }]);
</script>

When this snippet is implemented correctly, Klaviyo tracks all the products individual shoppers view. This information appears at the bottom of Klaviyo Profiles, in a Recently Viewed Items section:

recently-viewed-items.png

Recently Viewed Items can be leveraged in both flow and campaign emails. This guide references different use cases, and walks through building out the specific template blocks needed.

Flow Email Use Cases

The following flow use cases walk you through how to build out specific emails that utilize Recently Viewed Items. This process involves some manual editing to the email source code.

3 Most Recently Viewed Items

This email is for recipients that have viewed at least 3 products. For this reason, an Additional Filter must be added to the email: "Has Viewed Product is at least 3 over all time".

If you are building out an email series where one of the emails is specifically catered towards customers that have viewed several items in your store, you can use this hard-coded table block at the bottom of your email to elegantly feature the recipient's three most recently viewed items.

Instead of using Additional Filters, you could also trigger a flow from a segment (where the segment includes a condition around viewed item count).

Follow these steps to create this table block.

  1. Add a table block to your template. In this example we're using three columns, one for each item.
  2. Click to the Rows tab and set the block to "static'.
  3. For Row 1, set the type to "Image", and use the following placeholder to pull in the image of a recently viewed item.
    person.ViewedItems.0.ImageThumbnailUrl
  4. For Row 2, set the type to "Text". Click to edit the source of the block, and use the following snippet to pull in the title of the most recently viewed product.
    <p style="text-align: center;">
    	<a href="{{ person.ViewedItems.0.Url }}"><strong>{{ person.ViewedItems.0.Title }}</strong></a>
    </p>
    Notice the "0" used in the placeholders. This number refers to a contact's most recently viewed item. If you increment this number to 1, it refers to the second most recently viewed item.
  5. For Row 3, set the type to "Text". Click to edit the source of the block, then use the following snippet to pull in the price of the most recently viewed product.
    <p style="text-align: center;">
    	<em>{{ person.ViewedItems.0.Metadata.Price }}</em>
    </p>
  6. This completes adding in the code for the most recently viewed item. To add the next two items, repeat these steps for column 2 and column 3, but increment the "0" used in the snippets by 1 each time. For example, for Row 2, the code used in Step 4 changes to the following:
    <p style="text-align: center;">
    	<a href="{{ person.ViewedItems.1.Url }}"><strong>{{ person.ViewedItems.1.Title }}</strong></a>
    </p>

After you've completed building this block, you can test by clicking the Preview button from inside the template editor, and previewing with a customer who has recently viewed at least 3 items.

preview-email-550px.png

Recently Viewed Items, Custom Coded Grid

This template features a custom-coded text block at the bottom of your email that is built to feature all the recent products a recipient has viewed. The items will populate in a grid with 3 columns.

This custom-coded block is "smart" and only appears if the recipient has viewed 3 or more items. If a recipient hasn't viewed at least 3 items, the entire block will be hidden.

This custom-coded block can be placed at the bottom of any email where you want to feature all the items a recipient has recently viewed (if they've actually viewed 3 or more items). For example, if you have a lengthy Browse Abandonment email where at the top you feature the single most recently viewed item, towards the bottom you can insert this block as a feed of all viewed items. Another great place for this block is at the bottom of a winback flow email, where you might want to tempt the recipient back by showing items you know he/she has been peeking at.

Follow these steps to create this text block.

  1. Add a text block to your template, and click to edit the source of the template.
  2. Paste in the following snippet.
    {% if person.ViewedItems|length >= 3 %}
    	<div style="text-align:center; padding-bottom:10px">
    		<span style="font-size:22px"><strong>Recently Viewed Items:</strong>
    		</span>
    	</div>
    {% for item in person.ViewedItems %}
    
    <table style="display:inline-block; margin-left:auto; margin-right:auto">
     	<tbody>
     		<tr>
     		<td style="padding-right:15px;padding-left:18px; width:50px">
     			<img src="{{ item.ImageThumbnailUrl }}" style="margin: 1px; max-width: 150px; height: auto;" /></td>
     		</tr>
     		<tr>
     			<td style="padding-right: 15px;padding-left:18px; text-align: center; font-size:13px; width:50px; font-weight:800">{{ item.Title }}</td>
     		</tr>
     		<tr>
     		<td style="padding-right: 15px;padding-left:18px; text-align: center;font-size:12px; width:50px"><em>{{ item.Metadata.Price }}</em></td>
     		</tr>
     	</tbody>
     </table>
    {% endfor %}{% endif %}
    Be sure to click Source a second time to save your changes.

After you've completed building this block, you can test by clicking the Preview button from inside the template editor. If the block doesn't show, make sure you're previewing with a profile that has at least 3 recently viewed items.

All Recently Viewed, Grid

This template features a custom-coded text block built to feature all the recent products a recipient has viewed in a grid with 3 columns. If a recipient has only viewed 1 item, only that 1 item will show. If a recipient has viewed more than 1 item, the email will feature all items the recipient has viewed in a grid.

This template can be used as the 2nd email in a Browse Abandonment flow, scheduled to send 10-14 days after a product has been viewed. While the first email in a Browse Abandonment series may feature the single specific item viewed, the second email -- scheduled for over a week later -- can instead feature all recently viewed items. Use this template as a base, and modify it for future emails in your flow.

Follow these steps to create this text block.

  1. Add a text block to your template, and click to edit the source of the template.
  2. Paste in the following snippet:
    {% for item in person.ViewedItems %}
    <table style="display:inline-block; margin-left:auto; margin-right:auto">
    	<tbody>
     		<tr>
     			<td style="padding-right:15px;padding-left:18px; width:50px"><img src="{{ item.ImageThumbnailUrl }}" style="margin: 1px; max-width: 150px; height: auto;" /></td>
     		</tr>
     		<tr>
     			<td style="padding-right: 15px;padding-left:18px; text-align: center; font-size:13px; width:50px; font-weight:800">{{ item.Title }}</td>
     		</tr>
     		<tr>
     			<td style="padding-right: 15px;padding-left:18px; text-align: center;font-size:12px; width:50px"><em>{{ item.Metadata.Price|striptags }}</em></td>
     		</tr>
     	</tbody>
    </table>
    {% endfor %}
    
    Be sure to click Source a second time to save your changes.

After you've completed building this block, you can test by clicking the Preview button from inside the template editor.

Campaign Email Use Cases

You can also use Recently Viewed items inside of campaign emails. Use any of the block examples above to build one of the following campaigns.

Post-Winback Reengagement Campaign

Weeks or months after your last winback flow email triggers, you may want to reach out to those that used to be engaged but have since gone mysteriously MIA. For shoppers that have a history of viewed products, you can feature these same items to make sure you're hitting the mark on what might tempt each recipient to click.

Subscriber to Customer Conversion

You have a Welcome Flow, and a Browse Abandonment Flow, but what if you have a group of newsletter subscribers that continue to browse without ever pulling the purchasing? Maybe, you'll want to periodically launch a campaign to convert these individuals. Consider creating a segment of everyone that's viewed 3+ unique products but have never placed an order. Design a "recently viewed" template using the "All Recently Viewed, Grid" template as a starting point. If your brand leverages discounting, add in a discount code as an extra incentive.

Was this article helpful?
0 out of 0 found this helpful