Cross-domain tracking for Google Analytics – Donorbox

Since Donorbox uses an iframe to display the donation form embedded on your website, Google Analytics considers the user visits on the embedded page as two different users. One user session is created for the domain of your website and another for donorbox.org. This happens due to the browser's cross-domain cookie policy, which means that the cookie on your website is not shared with donorbox.org. However, this can become problematic when analyzing the analytic reports as it shows duplicated user sessions for a single user visiting the embedded page on your website, one for your website and the other for the donation form. It would be nice if it shows that the user who visited your website also visited the donation form.

To overcome the problem with cross-domain tracking, Google Analytics allows linking the duplicated sessions as one session using linker parameters. This involves generating a linker parameter on your website page and passing it onto the iframe in the Donorbox embedded code. Following this step-by-step guide will help you set up cross-domain tracking for your donation forms.

Step 1:

Go to https://tagmanager.google.com/#/home and create an account if not already created.

Step 2: Create Javascript Code Variable in your Tag Manager

Go to Variables and click New under "User-Defined Variables".

Step 3:

Name the variable as "DonorboxLinkerCallback" and choose variable type as "Custom Javascript".

Step 4:

Add the following Javascript code and click "Save".

function() {
  return function() {
    try {
      var gobj = window[window.GoogleAnalyticsObject];
      var iframes = document.querySelectorAll('iframe[name=donorbox][data-src]');
      var popupLinks = document.querySelectorAll('a.dbox-donation-button');

      var tracker, linker;
      if (gobj) {
        tracker = gobj.getAll()[0];
        linker = new window.gaplugins.Linker(tracker);
        
        for(var i = 0; i < iframes.length; i++) {
          var iframe = iframes[i];
          iframe.src = linker.decorate(iframe.dataset.src);
        }

        for(var i=0; i<popupLinks.length; i++) {
          var popupLink = popupLinks[i];
          popupLink.href = linker.decorate(popupLink.href);
        }
      }
    } catch(e) { console.error('Failed to execute DonorboxLinkerCallback') }
  }
}

This is how it looks:

Step 5: Create a Tag

Under "Tags" on the left menu, click on "New" to create a new tag.

Step 6:

Name the tag as "Donorbox Crossdomain Linker Tag" and choose tag type as "Google Analytics - Universal Analytics".

Step 7:

Choose the below options and make sure to enter the correct Tracking ID.

Step 8:

Add field hitCallback.

Step 9:

Add value to hitCallback field.

Step 10:

Chose custom Javascript and then chose the variable "DonorboxLinkerCallback" created above.

Step 11:

Similarly, add "allowLinker" field with value true.

Step 12:

Scroll down to set the following "Cross Domain Tracking".

Step 13:

Scroll down to add triggering and choose "All Pages". Click "Save" when you're done.

Click on the "All Pages" trigger and change the trigger type to "Page View - Window Loaded"

Step 14:

Submit your new tag by clicking "Submit".

Step 15:

Name the tag version with an optional description and Publish it by clicking "Publish".

Step 16: Installing Google Tag Manager

Click on the Google tag ID to display the GTM code.

Step 17:

Copy the code and place it on your website as instructed on the "Install Google Tag Manager" window.

Step 18: Update the analytics tracking code in your campaign editor to specify linker parameter and to set the cookie flags

Add linker and cookie_flags parameter to your analytics tracking code as shown below (Replace "UA-XXXXXXXXX-X" with your analytic tracking ID and "example.com" with your website domain).

  gtag('config', 'UA-XXXXXXXXX-X', {
    'cookie_flags': 'secure;samesite=none',
    'linker': {
      'domains': ['example.com']
    }
  });

The tracking code can be added to your campaign by going to the Technical tab:

Once the Tracking tab is open, you can paste the code:

Step 19: Edit the embed code on your website and change the iframe attribute name from "src" to "data-src". The below example shows how it should look after updating.

Embed code before updating:

<script src="https://donorbox.org/widget.js" paypalExpress="true"></script>
<iframe src="https://donorbox.org/embed/codeforamerica" height="685px" width="100%" 
style="max-width:500px; min-width:310px; max-height:none!important" seamless="seamless" 
name="donorbox" frameborder="0" scrolling="no" allowpaymentrequest></iframe>

Embed code after updating (see the <frame data-src= part below):

<script src="https://donorbox.org/widget.js" paypalExpress="true"></script>
<iframe data-src="https://donorbox.org/embed/codeforamerica" height="685px" width="100%" 
style="max-width:500px; min-width:310px; max-height:none!important" seamless="seamless" 
name="donorbox" frameborder="0" scrolling="no" allowpaymentrequest></iframe>

Step 20:

Clear the cookies for your website and open the embedded page. Navigate through the steps in the donation widget. That's it! Check your analytics on the next day as it requires some time for the data to be displayed in your Google Analytics.