You can send all donation data directly to Google Analytics 4. This documentation shows how best to configure your Google Analytics and Google Tag Manager accounts for best performance on WinRed.
Note: If you proceed with the setup below, it is recommended that you do not utilize WinRed's direct integration with Google Analytics.
Set up the Integration
Head to the Utilities tab and select the Integrations subtab. Click the green Add Integration button and select Google Tag Manager from the menu.
Enter the Integration name along with any notes and Container ID. Then, toggle it as active and select save.
Note: Your tag will need to be published to save the integration.
The rest of the recommended setup will be completed in Google Tag Manager.
In Google Tag Manager (GTM) navigate to Triggers and click New.
Enhanced Ecommerce Triggers
In GTM, navigate to Variables and click New. Select "Data Layer Variable" as the variable type.
For the Data Layer Variable Name field type in "panelUpsellID". For the Data Layer Version, select "Version 2". Name the variable "WR-DLV-panelUpsellID" and click the blue Save button in the top right corner. The variable should look like the one shown in the image below.
In GTM, navigate to Variables and click New. Select "Data Layer Variable" as the variable type.
For the Data Layer Variable Name field type in "category". For the Data Layer Version, select "Version 2". Name the variable "WR-DLV-Category" and click the blue Save button in the top right corner. The variable should look like the one shown in the image below.
In GTM, navigate to Variables and click New. Select "Data Layer Variable" as the variable type.
For the Data Layer Variable Name field type in "action". For the Data Layer Version, select "Version 2". Name the variable "WR-DLV-Action" and click the blue Save button in the top right corner. The variable should look like the one shown in the image below.
In GTM, navigate to Variables and click New. Select "Custom JavaScript" as the variable type.
Paste this code this the Custom JavaScript Box:
function()
{
if({{WR-DLV-panelUpsellID}} == null && {{WR-DLV-Category}} !== "conduit panel conduit upsell" && ({{WR-DLV-Action}} == "purchase" || {{WR-DLV-Action}} == "lead"))
{
return performance.navigation.type == 0 ? true : false;
}
else
{return true;
}
}
Make sure the variable looks like the one below. Name the variable "WR-CJS-Prevent Events from Page Refresh (not on Panels)" and click the blue Save button in the top right corner.
In GTM, navigate to Triggers. Configure the trigger to match the screenshot below. Make sure you also replicate the name of the trigger and check “use regex matching”. Click the New button in the Trigger section and select the Custom Event trigger type.
Fire on Add-to-cart, checkout, and purchase events
eec[.].*
Note:
Ensure regex is checked
Make sure you are including the CJS variable from earlier and setting "equal" to "true"
Below is what you type in the Event name field if you want to track one of the specific e-commerce events. Use the same settings as in the screenshot above, just update the Event name field.
Only Add-to-cart events
eec[.]add
Only checkout events
eec[.]checkout
Only purchase events
eec[.]purchase
Petition Sign-up Triggers
In GTM, navigate to Variables and click New. Select "Data Layer Variable" as the variable type.
For the Data Layer Variable Name field type in "gtm.elementId". For the Data Layer Version, select "Version 2". Name the variable "WR-DLV-Click ID" and click the blue Save button in the top right corner. The variable should look like the one shown in the image below.
In GTM, navigate to Variables and click New. Select "Data Layer Variable" as the variable type.
For the Data Layer Variable Name field type in "gtm.elementClasses". For the Data Layer Version, select "Version 2". Name the variable "WR-DLV-Click Classes" and click the blue Save button in the top right corner. The variable should look like the one shown in the image below.
In GTM, navigate to Variables and click New. Select "Data Layer Variable" as the variable type.
For the Data Layer Variable Name field type in "category". For the Data Layer Version, select "Version 2". Name the variable "WR-DLV-Category" and click the blue Save button in the top right corner. The variable should look like the one shown in the image below.
In GTM, navigate to Variables and click New. Select "Custom JavaScript" as the variable type.
Paste this code this the Custom JavaScript Box:
function(){
var exists = document.getElementsByTagName('head')[0].innerHTML.search("GTM-NTQZ9N");
if(exists > 0)
{
return "True";
}
else
{
return "False";
}
}
Make sure the variable looks like the example below. Name the variable "CJS - Website Check" and click the blue Save button in the top right corner.
In GTM, navigate the Triggers. Click the New and select the Click - All Elements trigger type.
In the "This trigger fires on" section select the "Some Clicks" option. Add each of the following settings in the "This trigger fires on" section:
WR-DLV-Click ID does not equal "donate-btn"
WR-DLV-Click Classes contains "btn-submit"
WR-DLV-Click Classes does not contain "invalid"
WR-DLV-Category equals "petition landing page"
CJS - Website Check equals "True"
Name the trigger "WR-Petition Landing Page Leads". Click the blue Save button in the top right corner.
When done entering these settings, the trigger should look like the screenshot below.
Configuring Google Analytics 4 via Google Tag Manager
First, log in to your Google Analytics account and navigate to Admin.
If you have a Google Analytics Universal Analytics Property:
Click on “GA4 Setup Assistant”:
Choose the first option to add Google Analytics 4 Property to your existing Universal Analytics Property:
If you do not have a GA4 Property or a Google Analytics Universal Analytics Property, click the “Create Property” Button:
Next, navigate to Admin:
Data Stream for the URL you want to track should be populated, if not add the URL you wish to track here by clicking the Add Stream button and selecting the Web Data Stream option.
Click on the URL you are tracking. Look for the Measurement ID:
Copy the Measurement ID.
Go to your Google Tag Manager Container.
Click on “Tags”:
Click on “New” to create a new tag:
At the top, name this tag “WR-GA4-Configuration”:
Click on the Pencil Icon for the “Tag Configuration” Box:
Choose “Google Analytics”:
Then choose "Google Tag":
Paste your Measurement ID into the Tag ID field populated for the Google Tag:
Click on the Pencil Icon for the “Triggering” Box:
Select the “All Pages” trigger:
Click the “Save” button.
Next, click the “Submit” button in the top right corner of your GTM Container:
Type in the Version Name Field “Adding GA4 Configuration” and click the Publish button:
You’ve now successfully configured Google Analytics 4 for your WinRed page using Google Tag Manager.
Set up eCommerce Tracking
Configuring ecommerce for GA4 is a two-step process and will require you to access your GTM account.
First, in your Google Tag Manager container, navigate to the Variables tab.
Click on the New button in User-Defined Variables box:
Next, click on the Pencil Icon for the “Variable Configuration” Box:
Select “Data Layer Variable”:
In the “Data Layer Variable Name” Field, type “ecommerce.products”
At the top of the tab, title this Data Layer Variable “DLV-Products”
Repeat steps above with the following Titles and “Data Layer Variable Name” Fields:
Title | Data Layer Variable Name |
DLV-Revenue | ecommerce.purchase.actionField.revenue |
DLV-Currency Code | ecommerce.currencyCode |
DLV-Transaction ID | ecommerce.purchase.actionField.id |
DLV-Products | ecommerce.products
|
Once you have added all of the data layer variables, your User-Defined Variables list should look like this:
In GTM, navigate to Tags > New > Tag Configuration > Google Analytics >Google Analytics: GA4 Event:
Title the Tag “WR-GA4-Ecommerce”.
In the “Measurement ID” field input the same Measurement ID you just used for the WR-GA4-Configuration tag you set up in the "Configuring Google Analytics 4 via Google Tag Manager" section above.
In the “Event Name” Field type, click on the lego brick button and select the WR-DLV-Action variable you created above in the Enhanced Ecommerce Triggers section.
Your tag should look like this.
Next, click on the Event Parameters and follow the table below for setting up the event parameters. Click on the "Add parameter" button to create a new parameter. For Parameter Name type in the name as it appears in the table below. For the “Value” field click on the “plus/lego brick” button for each field and select the corresponding Data Layer Variable you just created:
Parameter Name | Value |
value | DLV-Revenue |
transaction_id | DLV-Transaction ID |
items | DLV-Products |
currency | DLV-Currency Code |
For example for the Parameter value, you would type “value” into the Parameter
Name Field and click on the “plus/lego brick” button to find the DLV-Revenue data layer variable you just created.
Click "Add parameter" to add another parameter to the tag and follow the same steps for the transaction_id, items, and currency parameters.
When completed, your Tag Configuration box should look like this:
Next, click on the Triggering box’s pencil icon for the tag:
Select the WR-Trigger-CE-eec you created at the beginning of these instructions
Your tag should look like the picture below. Click on the Save button in the top right corner:
In your Google Tag Manager Container, click the “Submit” button in the top right corner:
Type in the Version Name Field “Adding GA4 Ecommerce Configuration” and click the Publish button:
After completing these steps, you have configured eCommerce for Google Analytics 4.
Questions?
If you have questions or are unsure on any of these steps, please reach out to our support team by clicking the red chat box at the bottom right corner of your screen.