Learn about our newest features and enhancements!
Google Analytics and Google Tag Manager Tracking
Jessica Mocha 6/21/2022 2:15:00 PM

We've made it easy to add Google Analytics and Google Tag Manager tracking and conversions to your online forms!

The first part of this articles includes instructions for Google Analytics.  The second includes instructions for Google Tag Manager.  Lastly, we have included instructions for how web developers can modify the data sent to Google.

Google Analytics


Prerequisites:
You have already set up a data stream for your CharityEngine form (instructions for that can be found here: https:// support.google.com/analytics/answer/9304153?hl=en) and use gtag.js.

1. Instructions for finding your Google Analytics Measurement ID:

In your Google Analytics dashboard, go to Admin > Data Streams > Click on your CharityEngine Form’s Data stream settings








2. Once you have found the correct stream, copy your Measurement ID:


3. Paste the Measurement ID into CharityEngine on the Google Analytics Integration page:


That's it! Conversion code is automatically added to each CharityEngine form. 

If you are a web developer and need to modify the code sent to Google, please see the Advanced Configuration section below.


Google Tag Manager


Prerequisites:
You have already set up a data stream for your CharityEngine form (instructions for that can be found here: https://support.google.com/analytics/answer/9304153?hl=en) and use Google Analytics GA4.

1. Instructions for finding your Google Tag Manager Container ID:

In Google Tag Manager, go to Workspace and find the Container with the tags you'd like to track.  Copy the ID at the top right-hand corner of the page




2. Paste the Measurement ID into CharityEngine on the Google Tag Manager Integration page:




That's it! 
Conversion code is automatically added to each CharityEngine form. 

If you are a web developer and need to modify the code sent to Google, please see the Advanced Configuration section below.




Advanced Web Developer Configuration

If you need to modify the conversion code sent to Google, manage the form you would like to edit.  Once you have loaded the form, go to the Advanced > Developer > Custom JS and Conversion Code tab:

 

There, you will see the conversion code sent to Google.  If you need to revert the code back after modifying or if your form does not have the default code, please reference below:



Google Analytics conversion code:

/*!
* GOOGLE ANALYTICS
* -------------------------------
* The Google Analytics code below can be modified or added to depending on what data you would like sent to Google
*/

document.addEventListener('DOMContentLoaded', function () {

if (WebFormContext.Form.StepName == 'Process Step' && WebFormContext.Form.RenderedViewName == 'Success View') {

gtag('event', 'purchase', {
"transaction_id": "[[transaction.id]]",
"affiliation": "Donation",
"value": "[[transaction.amount (no formatting)]]",
"currency": "USD",
"items": [
{
"id": "[[transaction.id]]",
"name": "CharityEngine Donation",
"category": "Donation",
"quantity": 1,
"price": "[[transaction.amount (no formatting)]]"
}
]
});

}

});



Google Tag Manager conversion code:

/*!
* GOOGLE TAG MANAGER
* -------------------------------
* The Google Tag Manager code below can be modified or added to depending on what data you would like sent to Google
*/

document.addEventListener('DOMContentLoaded', function () {

if (WebFormContext.Form.StepName == 'Process Step' && WebFormContext.Form.RenderedViewName == 'Success View') {

window.dataLayer = window.dataLayer || [];
dataLayer.push({
'event': 'purchase',
'transactionId': '[[transaction.id]]',
'transactionAffiliation': 'CharityEngine',
'transactionTotal': '[[transaction.amount (no formatting)]]',
'transactionProducts': [{
'sku': '[[transaction.id]]',
'name': 'Donation',
'price': '[[transaction.amount (no formatting)]]',
'quantity': 1
}, {
'sku': '[[transaction.id]]',
'name': 'Donation',
'price': '[[transaction.amount (no formatting)]]',
'quantity': 1
}]
});

}

});



Below is an example of the Tag and Trigger that will work with the Google Tag Manager code above:








*NOTE: There is 24-48 hour latency with E-commerce reporting:






But you can make sure the event was captured by going to your Google Analytics dashboard and looking at the Realtime data:




After 24-48 hours, you will see the data counted as Revenue in your Dashboard Home:





Related Articles

Powered by Powered By CharityEngine