Taboola’s pixel code consists of a base code - attached with your additional code snippets - to track event-based actions. Typically our pixel can define conversions by URL string, but in the case of Shopify additional code snippets need to be added.

How to Implement the Shopify Base Code

Across Site:
Go to the Online Store in your left menu, then click the Actions button next to the live theme, and select the Edit Code option. Open layouts/theme.liquid, and find the closing </html> tag. Add the base pixel code just before that tag, and save your changes.

Purchases: Go to Settings -> Checkout, and then scroll down to Additional Scripts and add the base code pixel as well as the event-based code for the Purchase action. Save your changes.  

Add-to-Cart: Select the active ".liquid" sheet where your "button" code for the add-to-cart KPI is located. Then create a URL type conversion with "/cart" (or equivalent).

The code will be similar to the following:

<button

     {% if product.empty? %}type=""button""{% else %}type=""submit""{% endif %}

     onclick=”_tfa.push({notify: 'event', name: 'Add_To_Cart'});”

     name=""add""

     id=""AddToCart-{{ section_id }}""

     class=""btn btn--full add-to-cart""

     {% unless current_variant.available %} disabled=""disabled""{% endunless %}>

     <span id=""AddToCartText-{{ section_id }}"">

       {% if current_variant.available %}

         {{ 'products.product.add_to_cart' | t }}

       {% else %}

         {{ 'products.product.sold_out' | t }}

       {% endif %}

     </span>

   </button>"

Revenue Passback: It is often valuable to track ROAS, or to ingest Order ID and other values contingent on a given user's session. In order to do so, you need to add a few values to our purchase code.

Available Shopify Macros

• {{ shop.currency }} - will return the currency of the transaction.
• {{ order_number }} - will return the order ID of the transaction
• {{ total_price | money_without_currency }} - will return the revenue of the transaction 

Step 1: Create a conversion event in Backstage (in this example the Event Name = make_purchase). Copy the event code into a word document or something you can manipulate. XXXXXXX represents the account ID.

<!-- Taboola Pixel Code -->
<script>
    _tfa.push({notify: 'event', name: 'make_purchase', id: XXXXXXX});
</script>
<noscript>
    <img src='//trc.taboola.com/XXXXXXX/log/3/unip?en=event_name'
        width='0' height='0' style='display:none'/>
</noscript>
<!-- End of Taboola Pixel Code -->

Step 2: Paste the string below into the event code after the Account ID

• String: , currency: '{{ shop.currency }}', orderid: '{{ order_number }}', revenue: '{{ total_price | money_without_currency }}'
• Full edited code:
  

<!-- Taboola Pixel Code -->
<script>
    _tfa.push({notify: 'event', name: 'make_purchase', id: XXXXXXX, currency: '{{ shop.currency }}', orderid: '{{ order_number }}', revenue: '{{ total_price | money_without_currency }}'});
</script>
<noscript>
    <img src='//trc.taboola.com/XXXXXXX/log/3/unip?en=event_name'
        width='0' height='0' style='display:none'/>
</noscript>
<!-- End of Taboola Pixel Code -->