Product Viewed Event - Custom Platforms

Today more than ever, customers expect messaging specific to their individual experience. To achieve this, it is possible to use dynamic variables within messages in the Product Viewed flow.

 

 


Required Properties

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 other 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"

Examples

<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" />

Back to Top

 

 


Testing Meta Tags

You can test if your meta tags are properly enabled on your site by running the following code in your browser's dev console:

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

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

 

Here is an example of what you should see after running the code:undefined

Back to Top

 

 


Alternative JavaScript Implementation

If modifying meta tags is not the route you wish to take, 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.

Back to Top

 

 


Tags Missing in Shopify Theme

If the tags are not showing up, place the following code in the theme.liquid file between the <head> </head> tags to dynamically populate the tags on product pages:

{% if template contains 'product' %}
<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 %}

Back to Top

 

 

If you have any additional questions please contact us at service@voyagesms.com.