In this article, we'll insert Voyage's purchase tag into the Shopify platform to gather that important purchase data as it is generated.
First, ensure that you have admin rights within your Shopify store.
NOTE:
This article assumes that Voyage is already integrated into your Shopify account. For users who still need to setup the integration, please refer to this documentation.
If you want to utilize Opt-In at Checkout, please reference this documentation page and skip the following.
Applying the purchase tags
First, navigate to Settings > Customer Events
Then, click on the "Add custom pixel" button (see Fig 1.1)
Figure 1.1
A dialog should pop up. I suggest placing "Voyage purchase tags" as the pixel name [1], but you may input any pixel name.
After typing in the pixel name, click on "Add pixel" button [2] at the bottom right corner of the dialog (see figure 1.2)
Figure 1.2
You will then be redirected to your custom pixel (See figure 1.3). It's empty for now, we will be pasting the purchase tags here.
Figure 1.3
Under the Code section simply paste the script below.
Ensure that you change the CLIENT_ID with your client ID before saving.
E.g. ❌ voyage.init('CLIENT_ID', { popup: false });
✅ voyage.init('f455951326', { popup: false });
const script = document.createElement('script');
script.setAttribute('src', 'https://assets.voyagetext.com/voyage.production.js');
script.setAttribute('async', '');
document.head.appendChild(script);
/* <![CDATA[ */
(function(){if(window.voyage)return;window.voyage={q:[]};var fns=['init', 'event', 'track'];
for(var i=0;i<fns.length;i++){(function(fn){window.voyage[fn]=function(){
this.q.push([fn,arguments]);}})(fns[i])}})();
voyage.init('CLIENT_ID', { popup: false });
/* ]]> */
analytics.subscribe("checkout_completed", async (event) => {
const checkout = event.data.checkout
voyage.track('Purchase', {
amountDollars: checkout.totalPrice.amount,
orderId: checkout.order.id
});
});Figure 1.4
Finding the CLIENT ID
To find your Voyage Client ID, just go to Settings [1] inside Voyage and look for the Client ID [2] field:
Figure 2.1
An alternate source for the Tracking Code and Purchase tag code can be found within the Voyage web app. Click on Settings [1], then Tracking [2]. Select Shopify in the drop down at the top [3] and you'll see your Tracking Code [4] and Purchase tag Code [5] with easy "copy script" links [6] for each. Note, that your Client ID is already populated in these code scripts:
NOTE: The purchase Tag script in this section is outdated. Please refer to figure 1.4 for the updated script.
Figure 2.2
Headless Support in Global Tag
By enabling headless support in the global tag, you prevent unnecessary automated add-to-cart checks and allow for the more seamless custom event-based add to cart functionality.
Note the headless: true portion of the following global tag code