Custom Events Tracking with GA4

image of the google analytics logo

GA4 is a new event driven data model which means that everything is an event, even pageviews.

It is also different from Universal Analytics in that it allows you to easily collect enhanced measurements. This means that besides pageviews, the GA4 site tag can also track Scrolls, Outbound Clicks, Site search, Video engagement, and File Downloads by default (which can be toggled on or off directly from inside of your Google Analytics account).

However, when you also want to track other advanced metrics with GA4, such as Button Clicks or Form Submissions, you will have to customize and add these additional scripts below to your landing page.

Note: You first have to connect the main GA4 integration (to be released soon).

1. Conversions triggered by button clicks

You can easily send events that fire upon button clicks to GA4 using the code snippet below. You can use this for buttons that are not tracked by default; i.e. buttons that don’t have a link that leads them away from your domain (for example, a button that opens a pop-up or a button with an on-page link).

Simply copy and paste the code below into Settings - Javascript - Body:

<script>
window.addEventListener('DOMContentLoaded', function () {
    var element = document.querySelector('#element-123 a');
    element.addEventListener('click', handler);
    function handler() {
      gtag('event', 'clicked_onpagelink_button', {

      '[parameter_1]' : '[parameter_1_value]',
      '[parameter_2]' : '[parameter_2_value]',
'[parameter_3]' : '[parameter_3_value]' }); } }); </script>

You will need to replace the brackets with your own event parameters. If you are not using them, make sure to delete the corresponding brackets from the code (as seen in this example). You also have to replace the event name clicked_onpagelink_button with a name that is relevant to your action. Included here is a working example snippet: 

You also need to change the element ID number with the one of your own button. Here is how you can find the button element ID number:

GIF illustrating how to find and change the element ID

If you want to track multiple buttons, you will have to add the code again for each button. Don’t forget to customize all the individual code snippets to have the correct element ID number, event name, and parameters for each separate button.

2. Conversions triggered by form submissions

While you can check the form submissions on our built-in Analytics dashboard, you can also track them in GA4.

Note that we offer two different code snippets for when you want to fire the same event for all your page forms or for when you want to fire a different event for each individual form on your page.

If you want to track one form, you need to paste the following snippet into Settings - Javascript - Body:

<script type='text/javascript'>
window.instapageFormSubmitSuccess = function (form) {
    
    gtag('event', 'form_submitted', {

      '[parameter_1]' : '[parameter_1_value]', 
'[parameter_2]' : '[parameter_2_value]',
'[parameter_3]' : '[parameter_3_value]' }); }; </script>

Just like with the event fired on button clicks, be sure to customize the event parameters. You also have to replace the event nameform_submittedwith a name that is relevant to your action.

If you have multiple forms on the same page, please use the snippet below. This needs to be pasted into Settings - Javascript - Body:

<script>
window.instapageFormSubmitSuccess = function (form, wid) {
    if (wid === 2) {
       gtag('event', '[event_name]', {

      'form' : '[parameter_value]',
      'fields' : 2,
      'form_type' : 'single step'
        });
    }
    else if (wid === 56) {
           gtag('event', '[event_name]', {

      'form' : '[parameter_value]',
      'fields' : 1,
      'form_type' : 'multistep'
        });
    }
    else {
        // do nothing
    }
};
</script>

For this second code snippet, you will need to edit the "wid" value, which is only the digit part of the element ID. For example, for #element-659, the "wid" value is "659".

NOTE: The "instapageFormSubmitSuccess" function can only be present on the page once, regardless of how many forms you have or how many actions you want to trigger after form submission. In case you have multiple snippets that need to fire after form submission, you must add all of them under the same Form Submit Callback function. If the snippets are not added under the same Form Submit Callback script, only the last function in the source code will be triggered.

3. Conversions triggered on the thank you page

You can also track conversions with a thank you page. First, create and publish a thank you page, and then set your main landing page to redirect to the thank you page after form submission. In this case, both pages should have the Google Analytics ID added in Settings> Analytics, and the thank you page should contain this code snippet as well, in Settings - JavaScript - Body:

<script> 
gtag('event', '[event_name]', { 
'[parameter_1]' : '[parameter_1_value]',
'[parameter_2]' : '[parameter_2_value]',
'[parameter_3]' : '[parameter_3_value]'
}); </script>

Note: GA4 needs 24 hours to process the data received.

Note: Tracking conversions on the 'Thank You' page with GA is not recommended because:

1. Anyone can reload the 'Thank You' page and it will lead to inflated conversions;

2. Source tracking for the 'Thank You' page visit might not be reliable. When the same 'Thank You' page is set for multiple pages, it is difficult to differentiate the data for each page, in terms of where the visit came from (example: visitor comes from page A and lands on the 'Thank You' page, but all the events on the 'Thank You' page trigger - Page A, Page B, Page C, etc). With advanced Google Analytics filters and UTM parameters in the URL, this can be improved to be more readable and relevant.

We suggest only tracking 'Thank You' page visits if the other two options from above (form submissions & button clicks) are not viable for your use case.

 

How to track the same action on multiple platforms at the same time

If you need to track conversions using events from both Facebook and Google Analytics or Google Ads, you just need to add the code for that platform in the same function instead of copying the entire code again. This is because the function only needs to be triggered once. If you use the same code with the same function twice, the second function will override the first one. You can find the content of the respective functions in the dedicated articles for conversion tracking for the other platforms, linked above.

Attributing conversions to different variations if you are A/B testing your page

If you are A/B testing your page and you want to attribute the conversions tracked with events to a certain variation, you will need to send the data through an event parameter that represents that variation. To do that, the following code needs to be added right above the standard form submission tracking code or button click conversion tracking code:
var variantName = __variant_custom_name;
This code will identify the variation name from the visitor’s browser, so they can attribute their conversions to that variation.
Next, you need to add thevariantNameevent parameter to your event snippet. For example, here is what an event snippet will look like after you add it:
gtag("event", [event_name}, {
[parameter1] : [parameter1_value],
[parameter12] : [parameter2_value],
variantName});

NOTE: For the variantName event parameter to be available in the GA4 UI, you will need to add it as a new custom dimension in Configure -> Custom definitions -> Custom dimensions (example). After you have done this, you will be able to see the conversions based on variations under Reports -> Engagement -> Conversions, and here you add the new Custom Dimension you just created, as you can see here.

NOTE: You will need to add your event parameters as custom dimensions otherwise, they are not available in the UI of GA4. They will only be available in Realtime.

NOTE:  The conversions are not session scoped anymore (if you had more conversions in a session, it was counted as just one in Universal Analytics). With GA4, it now counts every time.

NOTE: We only offer the ability to add custom code. We do not provide custom code assistance through the support team. In case you need help with a custom functionality or any code customization that is not provided through our Help Center articles, we have an Expert Services team that can help our Converting users. The Converting Solution includes Expert Services as well as additional features and services that can be seen here: https://instapage.com/converting-benefits