Single Page Applications can sometimes be tricky. Here are some tips on how to best use Fundraise Up with SPAs.
If your website is a Single Page Application and uses #fragment for navigation, the Fundraise Up installation code must be installed on webpage directly, rather than using Google Tag Manager to load the Fundraise Up installation code.
Why can this be problematic?
Fundraise Up uses #fragment to open the campaign checkout flow.
Website uses #fragment for navigation options (anchors).
- If it loads Fundraise Up library first — all good. Our library detects #donate in URL and opens Checkout.
- If it loads your website scripts first, they detects there is no "#donate" anchor or part of the webpage and just removes the fragment from URL. Once Fundraise Up library will be loaded, it won't find any #fragment in URL and won't open the Checkout.
When the Fundraise Up library is installed directly on the webpage, it reserves all #fragment internally before it can be changed by website scripts. Once the library is loaded, it will use reserved #fragment instead existing value in any URLs.
This will not slow down your website and allows everything to work correctly, and co-exist. correctly.
Why Google Tag Manager is not a solution?
GTM script loads asynchronously after scripts of your website. Once the Fundraise Up library is loaded on page, it is already too late - your website scripts already delete fragments from the URL.
In the case your website may change #fragment, the Fundraise Up library should be installed on page directly in <head> section.