Skip to main content

Tracking donations on your own website

Updated

Donorbox provides the ability to track donations on your own website. This is helpful if you want to track the conversions under your own domain rather than donorbox.org.

 

How does it work?

Donorbox has the option to configure a custom redirect URL for the campaign. Donors are redirected to this URL after the successful donation. Since this is per campaign-based configuration, it is possible to have different campaigns redirect to different URLs. This redirect URL can be a page on your website. In addition, Donorbox also allows you to pass the donation details as query parameters to the redirect URL. Thus enabling you to track the donation on your own website.

 

How to enable redirect URL for a campaign?

Step by step guide for enabling custom redirect URL for the campaign is available here https://donorbox.zendesk.com/hc/en-us/articles/360020294332-Can-I-redirect-donors-to-another-page-after-they-have-donated-

 

What details of the donation are passed to the redirect URL?

mceclip1.png

 

If the checkbox to send the donation details (as query parameters) to the redirect URL is enabled, as shown in the above screenshot, the following details of the donation will be passed to the redirect URL after the donation is successfully made by the donor.

  • id
  • first_name
  • last_name
  • email
  • amount
  • currency
  • address
  • address_line_2
  • state
  • city
  • country
  • zip_code
  • duration (this refers to how often this donation will be made)
  • form_id (this refers to the ID of the campaign)
  • form_name (this refers to the name of the campaign)
  • Responses to custom questions are also passed. The parameter name will be the label of that question in the form.

 

Donorbox also allows you to exclude donors' personal details for being passed to the redirect URL. To do that you need to enable the checkbox "Exclude donor's personal details"

 

mceclip2.png

 

When this checkbox is enabled, the donor's personal details such as first_name, last_name, email, address, address_line_2, state, city, country, and zip_code will be excluded from the above list.

 

Do we also need to input the tracking script in the "Analytics tracking code" or "After donation tracking code" field of the campaign?

Not required. Since the tracking script on the redirected page can track the donations after the donors are redirected to it, there is no need to input the tracking script in the "Analytics tracking code" or "After donation tracking code" of your campaign.

 

Examples

Now that the data is available in the redirect URL, you can easily extract the data to track the donations on your website. Here are the examples showing how to extract the data using javascript and pass it to the different analytics tracking scripts.

 

Tracking purchase events in GA4

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX', { cookie_flags: 'secure;samesite=none' });
</script>

<script>
  var params = new URL(window.location.href).searchParams;
  var donationId = params.get('id');
  var trackedId = 'tracked-ga4-purchase-' + donationId;

  if(donationId && !window.localStorage.getItem(trackedId)) {
    gtag('event', 'purchase', {
      'transaction_id': donationId,
      'value': params.get('amount'),
      'currency': params.get('currency'),
      'items': [{
        'item_id': params.get('form_id'),
        'item_name': params.get('form_name'),
        'affiliation': 'Donorbox',
        'item_category': 'Donation',
        'price': params.get('amount'),
        'item_variant': params.get('duration'),
        'quantity': 1
      }]
    });

    window.localStorage.setItem(trackedId, true);
  }
</script>

Note: Make sure to replace G-XXXXXXXXXX with your GA4 property ID.

 

Tracking as Adwords Conversions:

<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'AW-XXXXXXXXX', { cookie_flags: 'secure;samesite=none' });

  var params = new URL(window.location.href).searchParams;
  var donationId = params.get('id');
  var trackedId = 'tracked-AW-conversion-' + donationId;

  if(donationId && !window.localStorage.getItem(trackedId)) {
    gtag('event', 'conversion', {
      'send_to': 'AW-XXXXXXXXX/XXXXXXXXXXXXXXXXXXX',
      'value': params.get('amount'),
      'currency': params.get('currency'),
      'transaction_id': donationId
    });

    window.localStorage.setItem(trackedId, true);
  }
</script>

Note: Make sure to replace AW-XXXXXXXXX and AW-XXXXXXXXX/XXXXXXXXXXXXXXXXXXX with your AdWords ID.

 

Tracking purchase events using GTM dataLayer:

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
<!-- End Google Tag Manager -->

<script>
  var params = new URL(window.location.href).searchParams;
  var donationId = params.get('id');
  var trackedId = 'tracked-GTM-purchase-' + donationId;

  if(donationId && !window.localStorage.getItem(trackedId)) {
    dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
    dataLayer.push({
      'ecommerce': {
        'currencyCode': params.get('currency'),
        'purchase': {
          'actionField': {
            'id': donationId,
            'affiliation': 'Donorbox',
            'revenue': params.get('amount')
          },
          'products': [{
            'name': params.get('form_name'),
            'id': params.get('form_id'),
            'category': 'donation',
            'variant': params.get('duration'),
            'quantity': 1
           }]
        }
      }
    });

window.localStorage.setItem(trackedId, true);
} 
</script>

Note: Make sure to replace GTM-XXXXXXX with your GTM ID

 

Tracking FB pixel purchase event:

<!-- Facebook Pixel Code -->
<script>
  !function(f,b,e,v,n,t,s)
  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
  n.callMethod.apply(n,arguments):n.queue.push(arguments)};
  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
  n.queue=[];t=b.createElement(e);t.async=!0;
  t.src=v;s=b.getElementsByTagName(e)[0];
  s.parentNode.insertBefore(t,s)}(window, document,'script',
  'https://connect.facebook.net/en_US/fbevents.js');

  fbq('init', 'XXXXXXXXXXXXXXX');
  fbq('track', 'PageView');

  var params = new URL(window.location.href).searchParams;
  var donationId = params.get('id');
  var trackedId = 'tracked-FB-purchase-' + donationId;

  if(donationId && !window.localStorage.getItem(trackedId)) {
    fbq('track', 'Purchase' , {
      value: params.get('amount'),
      currency: params.get('currency')
    });

    window.localStorage.setItem(trackedId, true);
  }
</script>

Note: Make sure to replace XXXXXXXXXXXXXXX with your FB pixel ID

 

The above examples show how to extract a few donation details passed in the redirect URL to track the donations in your analytics account. However, you can do a lot more than tracking analytics, such as prefilling a registration form or displaying a customized thank message with the donor name, etc.

Related articles

Powered by Zendesk