Product Viewed Event - Custom Platforms

For those looking to use dynamic variables in messages for the Product Viewed flow.

If you would like to utilize the Product Viewed trigger event you will need Open Graph or custom metatags included in the header of each product page. Shopify includes these by default within your template but for custom platforms and some custom Shopify templates the following properties are required.

  • Type: "og:type"
    • "product" value required.
  • Product Title: "og:title"
  • Product URL: "og:url"
  • Product Image: "og:image"
  • Product Price Amount: "og:price:amount" or "product:price:amount"
  • Product Price Currency: "og:price:currency" or "product:price:currency"

For Shopify, please place the following code in theme.liquid between the <head> </head> tags, about 1/4 of the way down:


{% if template contains 'product' %}
<!-- Product page tags ================================================== -->
<meta property="og:type" content="product" />
<meta property="og:title" content="{{ product.title }}" />
<meta property="og:url" content="{{ shop.url }}{{ product.url }}" />
<meta property="og:image" content="https:{{ product | img_url: 'master' }}" />
<meta property="product:price:amount" content="{{ product.price | money }}" />
{% endif %}

An example of the end result of placing the tags within <head></head> for a product are as follows:

<meta property="og:type" content="product" />
<meta property="og:title" content="My Product Name | Voyage SMS" />
<meta property="og:url" content="https://voyagesms.com/products/my-product" />
<meta property="og:image" content="https://assets.voyagetext.com/img/products/my-product-image-blue.jpg" />
<meta property="product:price:amount" content="199.00" />
<meta property="product:price:currency" content="USD" />

For Testing

You can test if your meta tags are properly enabled on your site with the following in your browser console:

function getMetaPropertyContent(propertyValue, attrValue) {
var ele = document.querySelector('meta[property="' + propertyValue + '"]');
if (!ele) return '';

var value = ele.getAttribute(attrValue || "content")
return value || '';
}

Example:undefined

Alternative JavaScript Implementation

If modifying the meta tags is not the route you wish to take. Alternatively, you may execute the following JavaScript on product page load to trigger a Product Viewed event.

<script type="text/javascript">
voyage.event('ProductBrowse', 6, {
title: 'My Product Name',
url: 'https://voyagesms.com/products/my-product',
image: 'https://assets.voyagetext.com/img/products/my-product-image-blue.jpg',
amountDollars: '199.00',
currency: 'USD'
});
</script>

Note: The Voyage Global Tag must be included on the page and loaded prior to making the event call.