How to connect Tanganica Pixel to Shopify?

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.

‍

Phase 1 - Customer journey measurement

Follow this procedure:

1. Log in to your Shopify administration
2. Click on "Online store")
3. Click on "Themes")
4. Click on the three dots "... "
5. Click on "Edit code")
6. In the left menu, click on the file "theme. liquid "
7. In the opened file, find the end tag </head>Before this tag </head> (above it) paste Tanganica Pixel (copy from the app or here below)
8. Click on "Save"

Tanganica Pixel to copy:

<!-- 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 -->

‍

Procedure according to the pictures:

‍

Phase 2 - Measurement of completed orders

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! ✅