How can we help you?

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

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: If you do not wish to use custom code, you can also track Form Submissions and Button Clicks from inside the builder as explained in this guide.

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: https://d.pr/bONih0). You also have to replace the event name clicked_onpagelink_button with a name that is relevant to your action. 

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:

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 as seen here: https://d.pr/GUcw31, 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".

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 as shown here: https://d.pr/GtiCtA. In this case, both pages should be integrated with GA4, 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>

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

If you need to track conversions using events from both Facebook(https://d.pr/WAS2Ma) and Google Analytics(https://d.pr/yam9vx) or Google Ads(https://d.pr/406n20), 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

var variantName = __variant_custom_name;

gtag("event", [event_name}, {
[parameter1] : [parameter1_value], 
[parameter12] : [parameter2_value], 
variantName});

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: 

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: https://www.loom.com/share/40fc9935d17a469b91d96468472db4a9

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.