In case you are using Shopify's e-commerce solution, installing Tanganica Pixel will be a bit more complicated (because of the thorough security that Shopify has). However, this article will describe the installation of Tanganica Pixel step by step.
The installation of Tanganica Pixel on your Shopify e-shop will take place in two phases. In the first phase, you need to ensure that the measurement code will measure users and their journey. In the second phase, we will then move on to measuring completed orders. Completing both phases of the implementation is very important for the campaigns to work properly.
<!-- Tanganica pixel -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-TRS5RSN');</script>
<!-- End Tanganica pixel -->
Follow these steps:
1. Log in to your Shopify administration
2. Click on "Settings")
3. Click on "Checkout")
4. Find the section of the settings called "Order status page")
5. Enter the following code in the text box:
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-TRS5RSN');</script>{% if first_time_accessed %}<script>(function(){ window.dataLayer = window.dataLayer || []; // Totals var shipping_price = parseFloat('{{shipping_price | money_without_currency }}'.replace(",", ".")); var total_price = parseFloat('{{total_price | money_without_currency }}'.replace(",", ".")); var tax_price = parseFloat('{{tax_price | money_without_currency }}'.replace(",", ".")); var items = []; {% for line_item in checkout.line_items %} items.push({ item_id: '{{ line_item.sku }}', item_name: '{{ line_item.title | remove: "'" | remove: '"'}}', price: {{ line_item.final_price | times: 0.01 }}, quantity: {{ line_item.quantity }} }); {% endfor %} window.dataLayer.push({ event: "purchase", ecommerce: { transaction_id: "{{ checkout.order_id }}", currency: "{{ checkout.currency }}", value: total_price, // This should now be a number shipping: shipping_price, // This should also be a number tax: tax_price, // And this as well items: items } });})();</script>{% endif %}
6. Click on "Save"
Procedure according to the pictures:
Now your Tanganica Pixel is set up! ✅