Installation
First step is to ensure you have installed SmartTRACK on your page correctly:
- Install the Google Tag Manager code on your website:
- There are numerous guides on how to do this but we suggest: https://www.getfishtank.com/blog/track-events-google-analytics-4-and-google-tag-manager which is quite comprehensive.
- Install SmartTRACK's code on your donation page:
- Use your license information and the wizard page here to create the snippet: https://smartthing.org/olx-deploy. This is an HTML snippet and should be placed on your pages in the same way as you add the Online Express or NXT donation form to your site (it uses the same tech). The code should go immediately after the donation form if possible OR at the end of the page.
Google Tag Manager configuration
Suggested below is a default config but your GA team may have additional factors they may wish to add:
- Create a variable called 'event' (lower case) of type 'Custom Event'
- Create 'Data Layer Variables' for other custom properties:
- transactionTotal i.e. called GA4 - DLV - transactionTotal
- transactionProducts
- transactionId
- transactionAffiliation
- currency
- Add a trigger of type 'Custom Event' that triggers on:
- 'Event name': .* (Use regex matching ticked)
- Select 'Some Custom Events' and filter on:
- Either 'event' (lowercase) equals one of 'Donation', 'Event', 'Membership', 'Recurring donation', 'Pledge to give', 'SmartSTORE'
- Or matches RegEx (ignore case) 'Donation|Event|Membership|SmartSTORE|Pledge to give|Recurring donation' to capture all conversions.
- Finally add a 'Tag' of type 'Google Analytics: GA4 Event' where all the below {{..}} values are variables.
Note: Currency should be set to the three letter currency code for your GA account i.e. USD, GBP, AUD, CAD etc.
Verify
You can now verify everything is set up by visiting your donation page in Chrome (or Edge), press F12 to open the developer tools and go to the Console tab. You may need to scroll up and down a bit but you should see something like:
this may vary slightly but will have similar output and show the trackers detected and the success line.
OPTIONAL Config: Custom GA4 events and conversions
To use separate event types in GA4 rather than the generic 'purchase' you must mark the event types so they are considered conversions.
- Change the above Tag configuration by replacing the 'Event name' by the merge field '{{event}}'
- Adjust the events that are considered conversions in GA4 as per:
https://support.google.com/analytics/answer/9267568?sjid=8488443514398058599-EU
SmartTRACK, if configured in this way, fires various events which allow you to more closely analyse your purchases i.e. Events vary depending on the Online express activity being completed but can include:
- Donation
- Recurring donation
- Pledge to give
- Event
- Membership
- SmartSTORE
These event types MUST be marked as conversion event types in GA4 to have the proper tracking triggered.
Simple testing
To test that tracking is working you should place a pledge (or real donation) using your donation form and again review the console. You should see information such as the below, you can expand the data by clicking on the arrows to see more detail:
If you go to Google Analytics and the Reports > Real-time tab you will see a 'purchase' event in the 'Event count by event name' box, if you click on that event you can see the sort of information tracked:
Advanced testing
You can test further by installing the
Google Chrome extension for GA4. Once this extension is installed you need to visit your donation page and turn on the extension, the icon should then display as below:
If you now visit Google Analytics > Admin and under your tracking property go to 'DebugView' you will see a timeline appear with any events. Putting through a donation will now result in very detailed debug information being shown i.e.