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


To overcome the problem with cross domain tracking, Google Analytics allows to link the duplicated sessions as one session using linker parameters. This involves generating a linker paremeter on your website page and passing it on to the iframe in the donorbox embed code. Following step by step guide should be able to help you setup cross-domain tracking for your donation forms.


1. Go to https://tagmanager.google.com/#/home

2. Create an account if not already present



Create Javascript Code Variable in your Tag Manager

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

4. Name it as "DonorboxLinkerCallback" and choose variable type as "Custom Javascript"

5. 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 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);
        }
      }
    } catch(e) {console.error("Failed to execute DonorboxLinkerCallback");}
  }
}




Create a Tag

6. Click on "Tags" on the left menu

7. Click on "New" to create a new tag

8. Name it as "Donorbox Crossdomain Linker Tag"

9. Choose tag type as "Google Analytics - Universal Analytics"

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

11. Add field hitCallback

12. Add value to hitCallback field


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

14. Similarly add "allowLinker" field with value true

15. Scroll down to set following "Cross domain tracking"

16. Scroll down to add triggering and choose "All Pages"

17. Click "Save"



Installing Google Tag Manager

18. Click on the google tag id to display the GTM code 

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


Update the analytics tracking code in your campaign editor to specify linker parameter

20. Add linker 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', {
    'linker': {
      'domains': ['example.com']
    }
  });




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


Embed code before updating:

<script src="https://donorbox.org/widget.js" paypalExpress="false"></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 highlighted text below):

<script src="https://donorbox.org/widget.js" paypalExpress="false"></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>



Testing:

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