Cross-domain tracking with GA4

I assume you have already installed GA4 tracking code on your website and also in your donation forms. If not, you can refer to our guide here for details on installing GA4 tracking code in your donation forms.

Problem

Since Donorbox donation forms are loaded inside an iframe, which loads the content from donorbox.org domain which is different from your website domain, GA4 creates a separate cookie for donorbox.org. That means, the donor visiting the page on your website where the donation form is embedded, would have 2 separate cookies, one for donorbox.org domain and another one for your website domain. From there on, any GA4 events triggered inside the donation form are attributed to the cookie specifically created for donorbox.org. Thereby it fails to track the continuity of the donors' behavior.

GA4 does support cross-domain tracking by automatically attaching linker parameters to the links on your website page. But that doesn't work for iframes.

In this article, let's focus on setting up cross-domain tracking through GA4 for your Donorbox donation forms.

Add donorbox.org domain to the list of domains you want to track in your GA4 property

1. Click on the web stream that you have created to track the donors on your website.

2. Click on "Configure tag settings"

3. Click on "Configure your domains"

4. Add "donorbox.org" to the list of domains that you want to match as shown below.

5. Click "Save" button on the top right corner to save the changes.

Update the embed code on your website page to pass linker parameters to your donation form.

The next step is to automatically attach linker parameters to the embed URL of the donation form's iframe. This requires updating your existing embed code.

6. Replace your existing embed code on your website with the following

<a href="https://donorbox.org/embed/<campaign-slug>" target='dbox-form-embed' class='donorbox-ga-decorator-link'></a>
<script src="https://donorbox.org/widget.js" type="text/javascript"></script>
<iframe width="100%" style="max-width:500px; min-width:310px;" seamless="seamless" id="dbox-form-embed" name="donorbox" frameborder="0" scrolling="no" allowpaymentrequest></iframe>

<script>
  window.donorboxGaDecorator = window.setInterval(function() {
    var w = window;
    w.donorboxGaDecoratorCounter = (w.donorboxGaDecoratorCounter || 0) + 1;

    if(typeof gaGlobal != 'undefined' || w.donorboxGaDecoratorCounter >= 20) {
      w.clearInterval(w.donorboxGaDecorator);

      document.querySelectorAll('a.donorbox-ga-decorator-link').forEach(link => {
        var event = document.createEvent("MouseEvents");
        event.initMouseEvent("mousedown", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        link.dispatchEvent(event);

        var iframe = document.querySelector("iframe#" + link.getAttribute('target'));
        iframe.setAttribute('src', link.getAttribute('href'));
        link.remove();
      });
    }
  }, 100);
</script>

In the above snippet, the "href" attribute of the <a> tag should be the same as the URL ("src" attribute) of the iframe in your existing embed code. If you have made any other custom changes to the iframe tag of the existing embed code, you can copy those custom changes as well to the above iframe tag.

Please notice that the "src" attribute of the iframe is removed in the above code. Instead, the "href" attribute in the <a> tag will be used to add the "src" attribute automatically after attaching the linker parameter.

7. Save the above changes on your website and test to ensure you are able to view the donation form as it was before.

8. To verify that the cross-domain tracking is configured properly, open your website donation page in your browser and inspect the iframe URL. It should have the linker parameter attached to the URL of the donation form's iframe as shown below.