Conversion Tracking Pixels/Scripts

Often you'll need to be able to send off a ping, possibly with some basic information, to third party services when a customer completes a transaction. Commonly this is for services like Google Adwords, Facebook Ads etc, so you can tell how effective an ad campaign has been.

Generally speaking these services will give you some code to apply - either some javascript, or an image tag (or both) - and you just need to paste it onto the page where the customer ends up after completing their purchase. Some of these also require that you add in some details about the order, such as the total order cost, the transaction ID etc.

The FoxyCart receipt is where these scripts will need to be loaded, and to prevent double-ups, you'll also want to ensure that it's only run on the first time the receipt is loaded.

Adding custom code

To do that, you will include the provided code into the custom footer configuration option. To access that, head to the “configuration” section of your store's 2.0 FoxyCart administration, and look for the “Add custom header and footer code to your templates” configuration option. Enable that, and you'll see the footer textarea below.

Tracking one time only

To ensure that your code only executes the first time the receipt is loaded, you'll wrap it in a simple Twig tag that looks like this:

{% if first_receipt_display %}

{% endif %}

Including only on specific pages

If you need to include code on specific pages, you can also check for the page context as part of the Twig template, either for cart, checkout or receipt, or combinations of them, like this:

{% if context == "checkout" %}

{% endif %}

{% if context == "cart" or context == "checkout" %}

{% endif %}

If you need to target the cart, and limit to either just the full page cart, or just the sidecart display, you can also check the cart_is_fullpage variable:

{% if context == "cart" and cart_is_fullpage %}
  {# Only Full Page Cart #}
{% endif %}

{% if context == "cart" and not cart_is_fullpage %}
  {# Only Sidecart #}
{% endif %}

Example tracking script

For example, let's say we've been provided the following tracking pixel from a company we use:

<img src="https://example.com/track_sale?amount=TOTAL_ORDER_AMOUNT&tracking=ORDER_ID&userID=12345" width="1" height="1" />

The third party provider says that two values are needed here, the total order amount and the order ID.

Reviewing the Template View Data document, we can see what values we have available to us. For these particular values, we need {{ total_order }} and {{ transaction_id }} respectively. Paired with the if conditional for only displaying it on the first receipt display, our final code added to the footer textarea will look like this:

{% if first_receipt_display %}
<img src="https://example.com/track_sale?amount={{ total_order }}&tracking={{ transaction_id }}&userID=12345" width="1" height="1" />
{% endif %}

Common value placeholders

The full list of placeholders available on the FoxyCart templates can be seen on the Template View Data page, but below are some of the more common values:

  • {{ transaction_id }} - the id of the transaction
  • {{ total_item_price }} - the total price of all the products in the cart
  • {{ total_order }} - the total cost of the order, including shipping, taxes etc
  • {{ total_shipping }} - the total cost of shipping
  • {{ locale_info.int_curr_symbol|trim }} - the currency of the transaction

Specific Tracking Notes

Site Tools