As Google Analytics 4 (GA4) has replace Universal Analytics (UA), we have created a guide on how to send Sleeknote events to GA4 (e.g., form submissions) to create reports based on campaign activity, read below!
Once you have implemented our Tracking Code on your site, you will be able to send events from Google Tag Manager to your GA4 property (check out this guide on how to implement your Sleeknote tracking code with GTM).
Sleeknote 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:
- Sleeknote shown - whenever a Sleeknote campaign is displayed
- New subscriber - when a "Collect Email Addresses" type of campaign is submitted
- Blank click - when an "Increase Product Sales" or "Guide Your Visitors" type of campaign receives a click
- New contact request - when a "Connect With Visitors" type of campaign is submitted
The following variables are also available along with the "SleeknoteSubscriber" and "New Subscriber" events:
- fieldData (an array that contains the data submitted in the campaign)
Create Google Tag Manager variables for the Sleeknote 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 Sleeknote 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 CustomerID, simply replace it with fieldData.CustomerID).
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 Sleeknote event being pushed to the data layer. In this example, we will use "SleeknoteSubscriber".
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 "SleeknoteSubscribe" 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."