As Google Analytics 4 (GA4) will replace Universal Analytics (UA) in July 2023, we created a guide on how to send Onsite events to GA4 (e.g., form submissions) to create reports based on campaign activity, read below!
Once you have implemented your JavaScript snippet on your site or connected your OMS to your Drip account, you will be able to send events from Google Tag Manager to your GA4 property (check out this guide on how to integrate with Drip).
Drip automatically pushes several events to the dataLayer, making it easy for you to send these events to GA4. The following events are pushed to the dataLayer:
- Onsite campaign shown - whenever an Onsite campaign is displayed
- New email subscriber - when an "Opt-in" form is submitted
- Onsite campaign engaged - when an "Announcement" campaign receives a click
The following variables are also available along with the "New email subscriber" event:
- campaignName
- OnsiteCampaignId
- SignupPage
- fieldData (an array that contains the data submitted in the campaign, the PageTitle, the UserAgent etc.)
Create Google Tag Manager variables for the Onsite variables
Go to "Variables" in the Google Tag Manager menu, scroll down to User-Defined Variables, and click the "Create" button.
1. Choose "Data Layer Variable" from the menu and enter the name of the Onsite variable you want to use. In this example, we'll use "campaignName". Make sure to save.
2. If you want to send parameters such as SignupPage, follow the same process and replace the Data Layer Variable name with "SignupPage". If you want to send fieldData such as PageTitle, do the same process and replace the Data Layer Variable name with "fieldData.PageTitle" (if you want to choose another fieldData parameter, such as email, simply replace it with fieldData.email).
Send the event and parameters to GA4
1. Use the "New Tag" menu in Google Tag Manager and choose "Google Analytics: GA4 Event" as the tag type. Ensure you select your existing GA4 configuration tag from the Configuration Tag dropdown.
2. Give the event a name (this is the event name that will be shown in GA4) and add the Event Parameters you want to send along with the event. In this example, we are sending two parameters, SignupPage and PageTitle. In the value field, choose the Data Layer Variables that were created earlier by clicking on the building block button next to the Value field.
3. Create a new trigger and choose "Custom Event" as the trigger type. Name it the same as the Onsite event being pushed to the data layer. In this example, we will use "New email subscriber".
4. Select this trigger for the tag that was just created.
5. Now, make sure to submit your changes in Google Tag Manager, and you're all set!
Use the Debug tool in GA4 to check if the event is sent successfully
Optionally, you can use the "Preview" tool in Google Tag Manager - this will automatically append a debug_mode = true to your session, thereby showing the activity in the GA4 debug tool.
Enter your website's URL, which will open your site in a new window with debug mode enabled. Then, you can go to GA4 and open the "DebugView," which you can find under "Admin"
To test the "New email subscriber" event, submit a form. You should be able to see it in the "DebugView" and confirm that both the event and parameters are sent correctly.
💡 if you want to use the parameters in your reports, you can register a custom dimension:
- Go to "Administration" and choose "Custom Definitions."
- Click the "Create custom dimensions" button.
- Give your dimension a name, but make sure to use the exact name you chose in your Google Tag Manager GA4 event tag. In this example, I will use "SignupPage."