For example, you can track when a prospect starts the checkout process, so that if they don't finish it, you can run retargeting ads to bring them back.

In order to set up advanced tracking, you'll need to write (or copy-and-paste!)  a bit of basic JavaScript 🤓

Of course, if you'd like some help, just shoot us an email or reach out via chat, we'd be happy to answer any questions or give you a hand getting setup.

Events

The following events are dispatched during checkout and can be used to call custom code, like Google Analytics or Facebook Pixel functions:

  • podia:checkout:start  - fires once a new order is started
  • podia:checkout:purchase - fires when an order is purchased 
  • podia:checkout:upsell  - fires if upsell items are purchased
  • podia:checkout:subscribe - fires when a customer subscribes to a membership plan

A basic example looks like:

<script>
document.addEventListener('podia:checkout:purchase', function (event) {
  // Your tracking code here
});
</script>

How to add conversion code to your Podia store

Using values from the details object (more on that below), let's create an event listener for the standard event Upsell with Facebook Pixel.

<script>
document.addEventListener('podia:checkout:upsell', function (event) {
  var podiaCart = event.detail,
      ids = [],
      contents = [];

  // Format price in cents to XX.XX
  function formatPrice(cents) {
    return (cents/100).toFixed(2)
  }

  // Add item data to `ids` and `contents` array's
  podiaCart.items.forEach(function(item) {
    ids.push(item.id);
    contents.push({
      id: item.id,
      quantity: item.quantity,
      item_price: formatPrice(item.price),
    });
  });

  // Call Pixel track event
  fbq('track', 'Upsell', {
    currency: podiaCart.currency,
    value: formatPrice(podiaCart.total),
    content_name: podiaCart.name,
    content_type: podiaCart.type,
    content_ids: ids,
    contents: contents
  });
});
</script>

Here's the code to track Purchase :

<script>
document.addEventListener('podia:checkout:purchase', function (event) {
  var podiaCart = event.detail,
      ids = [],
      contents = [];

  // Format price in cents to XX.XX
  function formatPrice(cents) {
    return (cents/100).toFixed(2)
  }

  // Add item data to `ids` and `contents` array's
  podiaCart.items.forEach(function(item) {
    ids.push(item.id);
    contents.push({
      id: item.id,
      quantity: item.quantity,
      item_price: formatPrice(item.price),
    });
  });

  // Call Pixel track event
  fbq('track', 'Purchase', {
    currency: podiaCart.currency,
    value: formatPrice(podiaCart.total),
    content_name: podiaCart.name,
    content_type: podiaCart.type,
    content_ids: ids,
    contents: contents
  });
});
</script>

And here's Start :

<script>
document.addEventListener('podia:checkout:start', function (event) {
  var podiaCart = event.detail,
      ids = [],
      contents = [];

  // Format price in cents to XX.XX
  function formatPrice(cents) {
    return (cents/100).toFixed(2)
  }

  // Add item data to `ids` and `contents` array's
  podiaCart.items.forEach(function(item) {
    ids.push(item.id);
    contents.push({
      id: item.id,
      quantity: item.quantity,
      item_price: formatPrice(item.price),
    });
  });

  // Call Pixel track event
  fbq('track', 'Start', {
    currency: podiaCart.currency,
    value: formatPrice(podiaCart.total),
    content_name: podiaCart.name,
    content_type: podiaCart.type,
    content_ids: ids,
    contents: contents
  });
});
</script>

You can map these events to other Facebook standard events if they are more applicable to you. So, instead of Start , you could enter InitiateCheckout  or AddtoCart  if you'd like.

Just copy and paste these into the Website tracking code box after the Facebook Pixel code in your Settings.

If you want to get even more customized, here's some background info on how we're tracking these events:

Properties

A custom Podia event contains a detail property. The detail property is an object with data for the item a customer is purchasing.

A product's detail property contains the following:

  • name - name of the product
  • currency - ISO code of the product's currency
  • total - total price of item(s) in cents
  • type - type of item sold (product, upsell)
  • coupon - coupon code, if applicable
  • items - an array of items purchased

The items property of a product is an array of item objects with the following properties:

  • id - id of item
  • name - name of item
  • price - item price in cents
  • quantity - quantity of item
  • type - type of product (Course, Digital download, Bundle)

A subscription's detail  property contains the following:

  • name - membership name
  • plan - membership plan name
  • price - subscription price in cents
  • currency - ISO code the subscription's currency
  • interval - interval at which the subscription is billed (monthly, annual)

Have any questions about setting up Facebook or Google tracking for your conversions?

Just shoot us an email or reach out via chat, we'd be happy to help 👍

Did this answer your question?