Learn about our newest features and enhancements!
Developer: Integration with Google Analytics and Google Tag Manager Tracking
Authored by:
on 5/29/2024 2:35:00 PM

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.

Instructions: CharityEngine-Google Analytics Template

For easier, faster integration, simply import the CharityEngine Template following these steps:

Prerequisite: Upload the CharityEngineConversionTagTemplate.zip here and unzip file to expose the JSON

Step 1: Log-in to Google Tag Manager

Step 2: Locate the fear icon for the CharityEngine container

Step 3: Select Import Container

Step 4: Select Choose Container file and upload the

Step 5: From Choose workspace, select Existing option to import the template file to your existing container

Step 6: Select Merge as the import option and click Confirm

Step 7: Workspace Changes will now reflect in the Google account

Step 8: Access the Tags to locate the CharityEngine Conversion Tag

Step 9: Add your Measurement ID from Google Analytics

Important to note: ensure the container value (new or existing) within Google Tag matches the value as established above within Instructions: Google Analytics Integration


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.

Q. Can Google Analytics be used within Advocacy Issues?
A. Yes - when creating a new issue, navigate to the Advanced > Developer > Custom JS & Conversion Code to view the Google Analytics and Google Tag Manager code.



Related Articles

Powered by Powered By CharityEngine