Skip to main content

How to set up Meta Pixel conversion tracking

In this article we’ll explain how to track successful Double donations with the Meta (Facebook) Pixel

Updated over 10 months ago

Prerequisite: Your site already loads the Meta Pixel base code (the snippet that defines fbq()), or you manage it via Google Tag Manager (GTM).

  1. Add this script to the <head> of your site

    Place it immediately after the Double embed code. It listens for the Double.donationCompleted event and (a) pushes the data to GTM, and (b) fires a Donate event to Meta.

    <script>
    document.addEventListener("Double.donationCompleted", e => {
    const d = e.detail.donation;

    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
    event: "donationCompleted",
    value: d.amount,
    currency: d.currency,
    transaction_id: d.id
    });

    fbq('track', 'Donate', {
    value: d.amount,
    currency: d.currency,
    donation_id: d.id,
    event_id: d.id
    });
    });
    </script>

  2. Configure Google Tag Manager

    1. Create three Data-Layer variables

      1. value

      2. currency

      3. transaction_id

    2. Create a Trigger

      1. Type: Custom Event

      2. Event name: donationCompleted

    3. Create a Tag

      1. Tag type: “Meta Pixel” template (or Custom HTML if you prefer)

      2. Event name: Donate

      3. Parameters:

        {
        value: {{value}},
        currency: {{currency}},
        donation_id: {{transaction_id}},
        event_id: {{transaction_id}}
        }
      4. Triggering the donationCompleted trigger you just created.

    4. Publish the container.

      After the first real-world donation you’ll see the Donate event appear in Meta Events Manager.

Need to track donations without Google Tag Manager?

If you prefer a code-only install, simply remove the dataLayer block above and keep the fbq('track', 'Donate', …) call. That one snippet will do everything.

Did this answer your question?