Learn about our newest features and enhancements!
Developer: Integration with Google Analytics and Google Tag Manager Tracking

Introduction

If you are actively using Google Analytics and/or Google Tag Manager for tracking and analytics, we've made it easy to add tracking and conversions to your online forms! In this article, we will provide you with a few steps to connect your Google Analytics Measurement ID and/or Google Tag Manager Container ID to begin data analysis within your organization. If you have questions about Google Analytics and/or Google Tag Manager functionality, please visit Google for information on this product feature. 



Prerequisites

  1. Please have your Google Analytics Measurement ID and/or Google Tag Manager Container ID available. 
    1. 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.
    2. 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.

Instructions

Google Analytics Integration


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.

Step 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



Step 2: Once you have found the correct stream, copy your Measurement ID:
Step 3: Paste the Measurement ID into CharityEngine on the Google Analytics Integration page by navigating to the Configuration App > Integrations > Google Analytics > enter your Measurement ID > click SAVE:
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.
Note: The Google Analytics conversion code is automatically added to each CharityEngine web form. If you are managing your Google Analytics at the web form level, you will not need to complete the steps outlined in Goggle Analytics Integration steps as this will result in duplication in your analytics. You can also add the Google Analytics conversion code to the by navigating to the Configuration App > Design & Messages > Templates > locate your template > ACTIONS: Manage > Screen HTML Page Content.

Google Tag Manager Integration


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.

Step 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

Step 2: Paste the Measurement ID into CharityEngine on the Google Tag Manager Integration page by navigating the Configuration App > Integrations > Google Tag Manager > enter your Measurement ID click SAVE
Step 3: Within Google Tag Manager, Add the Transaction ID variable
Step 4: Within Google Tag Manager, Add the Transaction Amount Variable
Step 5a - If Using GA4, add a Tag Template 
Step 5b - If Using GA4, add the EEC dataLayer Builder for GA4 variable
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

Step 1: If you need to modify the conversion code sent to Google, manage the web form by navigating to the Online App > Web Forms > Search & Manage > locate your identified form > ACTIONS: Manage > Advanced tab > Developer sub tab > Custom JS and Conversion Code

Note: The Google Analytics conversion code is automatically added to each CharityEngine web form. If you are managing your Google Analytics at the web form level, you will not need to complete the steps outlined in Goggle Analytics Integration steps as this will result in duplication in your analytics. You can also add the Google Analytics conversion code to the by navigating to the Configuration App > Design & Messages > Templates > locate your template > ACTIONS: Manage > Screen HTML Page Content.

 

Step 2: 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() {

//make sure the gift processed successfully
if (WebFormContext.Form.StepName == 'Process Step' && WebFormContext.Form.RenderedViewName == 'Success View') {

window.dataLayer = window.dataLayer || [];

dataLayer.push({
event: 'purchase',
ecommerce: {
purchase: {
actionField: {
id: '[[transaction.id]]',
revenue: '[[transaction.amount (no formatting)]]'
},
products: [{
id: '[[transaction.id]]',
name: '[[web form.name]]',
price: '[[transaction.amount (no formatting)]]',
category: 'Donation',
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:



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:


FAQs & Additional Reading

Q. How can I locate my Google Analytics Measurement ID?
A. 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.

Q. How can I locate my Google Tag Manager Measurement ID?
A. 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.

Q. I am using the Google Analytics within the web form for customized analytics. How can I best leverage at the web form level?
A. The Google Analytics conversion code is automatically added to each CharityEngine web form. You can access the code by navigating to the Online App > Web Forms > Search & Manage > locate your identified web form > ACTIONS: Manage > Advanced tab > Developer sub tab > Custom JS and Conversion Code. You will not need to complete the steps outlined in Goggle Analytics Integration steps as this will result in duplication in your analytics. You can also add the Google Analytics conversion code to the by navigating to the Configuration App > Design & Messages > Templates > locate your template > ACTIONS: Manage > Screen HTML Page Content.

Powered by Powered By CharityEngine