Custom Events
      Back to home
      1. Voyage SMS Help Center
      2. Drips
      3. Custom Events

      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:

      /** 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: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

       

      Tags Missing in BigCommerce Theme

       

       

      Back to Top

       

       

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