How To Embed XPO Pixel Into A Shopify Site?

(A) Embed XPO remarketing pixel

1. Log in to your Shopify Store Account, and click on Online Store.

   
   
   

2. From your live theme, click Actions > Edit Code.
   
   

   

3. Click on Theme.Liquid. This is where you will place XPO remarketing pixel into.
   • The remarketing pixel will now be added to the shopify live site theme.
   • To use different parameters, you will need to change your code/script with the correct variables. For instance, if you want to include v1=%%PAGE_TYPE%% into your script, you will need to replace %%PAGE_TYPE%% with the actual value.

   

(B) Embed XPO conversion pixel

1. Log in to your Shopify Store Account, under Home page, go to Settings.
   
   

   
   
   

2. Select Checkout to customize your conversion pixels.
   
   

   
   
   

3. Scroll down to Additional scripts. This is where you place XPO conversion pixel script/code.
   
   

   

   • Once you have included the script/code, replace the necessary variables such as currency, value, product ID, page URL, order number/ID, etc. with your desired corresponding values.

     The pixel code placed under these Additional scripts will be applied to the Thank You page only. All other conversion pixels such as view cart, view product, etc. are included in the theme.liquid (or other liquid themes such as cart.liquid; customers/account.liquid, etc. ) as explained above under the Remarketing pixel. The corresponding conditions such as cart/product URL must be added to these scripts.

YOU MAY WANT TO DO THIS:

Since this script is fired every time a Thank you page is loaded (e.g. when a customer re-visits the page to check his/her order status multiple times), you will need to add the below to your script to prevent duplicated firing and hence tracking/recording of multiple conversion events.

{% if first_time_accessed %}

Insert the conversion pixel(s) that you only want to fire during the first time here

{% endif %}

How Do I Embed Google Tag Manager (GTM) Pixel on Shopify?

1. Log in to your Shopify Store Account, and go to Settings.
   
   
   
   
2. Select Online Store >> Themes, and from the Actions dropdown click Edit Code.
   
   
   
3. Click on theme.liquid.
   
   Once you have your GTM code, key it into the script below and Save.
   
   
   
   
4. To allow GTM to read and process your Purchase (checkout) data you will need to include/copy the below script to your Checkout page, under Additonal Scripts and Save.
   
   
   
   The code includes the following variables: page type, currency, shipping price, total price, tax price, payment type and transaction ID. 
   
   

   {% if first_time_accessed %}
   <script>
   window.dataLayer = window.dataLayer || [];
   var shipping_price = '{{shipping_price | money_without_currency }}';
   shipping_price = shipping_price.replace(",", ".");
   var total_price = '{{total_price | money_without_currency }}';
   total_price = total_price.replace(",", ".");
   var tax_price = '{{tax_price | money_without_currency }}';
   tax_price = tax_price.replace(",", ".");
   window.dataLayer.push({
   'page_type': 'purchase',
   'event': 'analyzify_purchase',
   'currency': "{{ shop.currency }}",
   'totalValue': total_price,
   'shipping': shipping_price,
   'tax': tax_price,
   'payment_type': '{{order.transactions[0].gateway}}',
   'transaction_id': "{{order.name}}",
   });
   </script>
   {% endif %}

   
   
   
   

• Once you have completed the above steps, go to your Google Tag Manager and learn how to embed XPO Tag Via Google Tag Manager (GTM).