Skip to main content
All CollectionsCollecting paymentsAdditional
Tracking forms with Google Analytics
Tracking forms with Google Analytics

Setting up Google Analytics in Beacon

Updated over a week ago

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

  1. Go to Settings > Charity Preferences in Beacon

  2. 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)

  3. 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):


    2. Your website domain

  4. When new donations and memberships are made, they will automatically start appearing in your Google Analytics.

  5. 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)) {
var js = d.createElement('script'); = id;
js.src = '';
}(document, 'beacon-js-sdk'));

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

  1. Create a new tag, choosing Google Analytics: GA4 Event

  2. In the Event Name field, enter the built-in {{Event}} parameter

  3. In More Settings > Ecommerce, toggle on Send Ecommerce data, with data source as Data Layer

  4. So far, your settings should look like this:

  5. In the Triggering section, add two Custom Event triggers. One for purchase and one for add_to_cart:

  6. Your tag's Triggering section should now look like this:

  7. 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 submitted

  • page_view - which includes a "fake" form submission URL with "/confirm" on the end:

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:

  • Submission URL:

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'

Did this answer your question?