Note: The Google Analytics integration is available on the Standard, Premium, and Ultimate plans.
Beacon makes it easy to take donations or sell event tickets online via popular payment methods like credit cards, PayPal, and Apple Pay. When payments are made, they're automatically saved into Beacon for you to report on or generate charts from.
However, how can you track where the donations come from? Enter Google Analytics - a fantastic (free) tool for tracking the success of your marketing campaigns. It helps you answer questions like:
Which marketing channels drive the most revenue?
Which emails are the most successful at driving donations?
Which Google ads provide the best ROI?
Google Analytics helps you move on from numbers that don't matter (like open rates, click throughs) and focus on what matters - money donated to your end cause, and how you can attract more of it.
Set up Google Analytics with Beacon
Go to Settings > Charity Preferences in Beacon
Paste your Google Analytics Measurement ID into the 'Google Analytics' field (You can find your ID in your Google Analytics account, in Admin > Property > Data Streams)
To ensure that sessions are tracked correctly in Google analytics, you will need to add the following domains to your cross-domain measurement list in Google Analytics (Admin > Property > Data Streams > Configure tag settings > Configure your domains):
yourdomain.beaconforms.com
Your website domain
When new donations and memberships are made, they will automatically start appearing in your Google Analytics.
The steps above will allow donations to be added and tracked correctly, but they won't have sources correctly attributed to them - because Beacon forms run on a separate domain to your website.
To resolve this, ask your web developer to add the Beacon tracking code below to every page of your website:
<script type="text/javascript">
(function (d, id) {
if (d.getElementById(id)) {
return;
}
var js = d.createElement('script');
js.id = id;
js.src = 'https://static.beaconproducts.co.uk/js-sdk/production/beaconcrm.min.js';
d.getElementsByTagName('head')[0].appendChild(js);
}(document, 'beacon-js-sdk'));
</script>
Embedding forms in your website? You're not quite done yet - read on 👇.
Tracking using embedded forms
If you're embedding Beacon forms in your website, Beacon automatically "hooks into" the Google Analytics code you already have running on your pages.
Important: Google Analytics must be running on your website for Beacon to automatically track events.
Direct embeds
If you run Google Analytics on your website directly (using code similar to the below), there's nothing more to do. Beacon will automatically hook into this code.
Google Tag Manager
If you serve Google Analytics via Google Tag Manager (GTM), then Beacon will not (we can't!) automatically track data into Google Analytics. Instead, we push data into GTM's "dataLayer", which you can use to pass data into Google Analytics yourself.
This gives you more flexibility, but you'll need to set it up yourself in Google Tag Manager:
1) Purchase and add to cart events
Create a new tag, choosing Google Analytics: GA4 Event
In the Event Name field, enter the built-in
{{Event}}parameterIn More Settings > Ecommerce, toggle on Send Ecommerce data, with data source as Data Layer
So far, your settings should look like this:
In the Triggering section, add two Custom Event triggers. One for
purchaseand one foradd_to_cart:
Your tag's Triggering section should now look like this:
Publish your changes to your live website.
You're done! Google Tag Manager will now automatically track Beacon's ecommerce events into your Google Analytics.
2) Other events
Beacon also tracks the following events into Google Tag Manager:
beacon_form_submit- after a form (of any kind) is submittedpage_view- which includes a "fake" form submission URL with "/confirm" on the end:https://thecharitytrust.beaconforms.com/form/321f8697/confirm
If you'd like to track additional events on your website (e.g. firing a Facebook pixel), we recommend custom the beacon_form_submit custom event trigger in Google Tag Manager:
Debugging data
Want to see exactly what data is coming from Beacon into Google Analytics? Here are a couple of options:
1) Add ?ga_debug=true to the end of your URL
This will automatically start Google Analytics in "debug mode", which will enable Google's debug view. In Google Analytics (Admin > Property > Debug View), you'll be able to see the events coming in in real-time.
Heads up: this doesn't work for embedded forms. If you're serving GA via Google Tag Manager, opening GTM in "preview" mode will also enable debug mode.
2) Google Analytics debugger Chrome extension
This Chrome extension allows you to see full details of the events sent to Google in the developer console.
Frequently Asked Questions
Is there a URL for the successful submission of a form?
Yes! Every form submission will log a page view with "/confirm" so that you configure the exit of your sales/marketing funnel.
For example:
Form URL:
https://thecharitytrust.beaconforms.com/form/321f8697Submission URL:
https://thecharitytrust.beaconforms.com/form/321f8697/confirm
Alternatively, if you're redirecting to another page from the form completion you could also use that URL instead.
How do I connect Universal Analytics tracking codes to my new Google Analytics 4?
If you're upgrading to Google Analytics 4, but have existing Universal Analytics tracking codes running on your website, you can connect the existing tracker to your Google Analytics 4 property:
In Beacon, you can then add your existing Universal Analytics tracking ID (UA-XXXX).
How do I set up a new GA4 property based on my old UA property?
When you're ready to move your tracking to GA4, Google have a setup assistant that will help to create your new property. Go to Admin > Property > GA4 Setup Assistant in your Google Analytics account, and choose 'I want to create a new Google Analytics 4 property'
