The Taboola 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 Taboola Pixel in Shopify

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.

How to implement purchase events in Shopify

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.  

How to implement start-checkout events in Shopify

Only Shopify Plus advertisers can place a Taboola checkout event pixel on a Shopify checkout.

Merchants with Shopify Plus have access to the checkout.liquid file. This enables them to customize the checkout page and add a Taboola checkout pixel to track conversions triggered by users who initiated the checkout.

<!-- Taboola Pixel Code -->

<script>

   _tfa.push({notify: 'event', 

      name:’start_checkout’’,

      id: XXXXXXX, 

   });

</script>

<!-- End of Taboola Pixel Code →

checkout.liquid is unavailable to users of the Basic and Advanced plans. As a result, the checkout pixel cannot be added. More information here and here.

How to implement add-to-cart events in Shopify

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

How to dynamically track revenue from Shopify

Return on Ad Spend (ROAS) is one of the most important metrics you’ll measure for your campaigns. Measuring ROAS allows you to determine how much revenue you generate from each advertising dollar you spend. Use these instructions to add dynamic revenue tracking via Shopify to your custom event. 

You may also pass Order IDs and other values contingent on a given user's session. 

To add dynamic revenue tracking to your Taboola reporting, add or edit a conversion event in Taboola Ads. 

• To create a new event, click here.
• To edit an existing event, click here. 

Recommended Shopify Macros

• {{ shop.currency }} - will return the currency of the transaction. 
  • The following currencies are supported by Taboola: ILS, GBP, USD, BRL, EUR, INR, JPY, KRW, CNY, RUB, AUD, CAD, HKD, MXN, NZD, SGD, THB, TRY, ZAR.
• {{ order_number }} - will return the order ID of the transaction
• If your currency is USD: {{ total_price | money_without_currency }} - will return the revenue of the transaction.
  • For all other currencies, some additional development is required to ensure that revenue values are encoded to use a comma (i.e., one thousand dollars would render as 1,000, not 1.000). Shopify outlines how to here. 
  • Once updated, use of {{ total_price | money_without_currency }} will return the revenue of the transaction. 

Once you have your Taboola event code copied or downloaded, insert the relevant macro(s) into the code. The string XXXXXXX represents your 7-digit numeric Account ID. 

Example of a Taboola Event code with dynamic Shopify parameters added: 

<!-- Taboola Pixel Code -->
<script>
    _tfa.push({notify: 'event', 
       name: 'Purchase', 
       id: XXXXXXX, 
       revenue: '{{ total_price | money_without_currency }}', 
       currency: '{{ shop.currency }}', 
       orderid: '{{ order_number }}'
    });
</script>
<!-- End of Taboola Pixel Code -->