Skip to main content
All CollectionsDripsCustom Events
Product Viewed Event - Custom Platforms
Product Viewed Event - Custom Platforms
Updated over a week ago

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"


<meta property="og:type" content="product" />
<meta property="og:title" content="My Product Name | Voyage SMS" />
<meta property="og:url" content="" />
<meta property="og:image" content="" />
<meta property="product:price:amount" content="199.00" />
<meta property="product:price:currency" content="USD" />

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:

/** Retrieves the property by name */
function getMetaPropertyContent(propertyValue, attrValue) {
var ele = document.querySelector('meta[property="' + propertyValue + '"]');
if (!ele) return '';
var value = ele.getAttribute(attrValue || "content");
return value || '';

/** Logs the properties for viewing */
['og:type', 'og:title', 'og:url', 'og:image', 'product:price:amount', 'product:price:currency'].map((key) => [key, getMetaPropertyContent(key)])
), null, 2));

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


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: '',
image: '',
amountDollars: '199.00',
currency: 'USD'

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

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:

{% raw %}{% 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 %}{% endraw %}

If you have any additional questions please contact us at [email protected].

Did this answer your question?