How do I see my Onsite data in Google Analytics 4?

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.)

 

💡The “New email subscriber” event fires twice every time an Onsite form is submitted

When submitting an Onsite form, you may notice two new email subscriber events fire. Though they share the same event name, each New email subscriber event serves a different purpose:

• One New email subscriber event is set to ensure relevant events are sent to different trackers whenever the form is interacted with, including a GA4 event to record actions (e.g., a new subscriber signs up).
• The other New email subscriber event provides additional event data such as the details of the onsite form submitted, the new subscriber data, etc. to the data layer.

The workaround would be to configure your event names within GA4 to differentiate between the two New email subscriber events.

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: 

1. Go to "Administration" and choose "Custom Definitions."
2. Click the "Create custom dimensions" button.
3. 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."