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" />
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 */
console.log(JSON.stringify(Object.fromEntries(
['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: '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.
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 %}For more information on Shopify's product object ( ##{{ product.title }} ) visit: https://shopify.dev/docs/themes/liquid/reference/objects/product
For more information on Shopify's image URL filter ( ##{{ product | img_url: 'master' }} ) visit: https://shopify.dev/docs/themes/liquid/reference/filters/url-filters#img_url
For more information on Shopify's money filter ( ##{{ product.price | money }} ) visit: https://shopify.dev/docs/themes/liquid/reference/filters/money-filters#money
If you have any additional questions please contact us at [email protected].