Single Page Applications can sometimes be tricky. Here are some tips on how to best user Fundraise Up with SPAs.
If your website is Single Page Application and uses #fragment for navigation, Fundraise Up code must be installed on webpage directly.
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.
In case Fundraise Up library installed directly on webpage, it reservers 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 is loading 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 fragment from URL.
In the case your website may change #fragment, the Fundraise Up library should be installed on page directly in <head> section.