Welcome to the Instapage Support Center

|

Google Analytics event tracking

Google_Analytics_Logo_2015.png

Our direct Google Analytics integration tracks page views by default. This means it will fire each time the page loads. In order to connect your Google Analytics account with the landing page, follow the steps in this article. When you need to track more advanced metrics with Google Analytics, you will also have to customize and add their tracking script following the instruction below.

Conversions will be triggered either by button clicks, or by form submissions or by visits to a thank you page (used as a conversion page).

Note: You have to also add the Google Analytics ID in Settings - Analytics as described in the article mentioned above.

1. Conversions triggered by button clicks

You can easily add Google Analytics events that fire upon button clicks using the code snippet below. Paste the code into Settings - Javascript - Body:

<script>
window.addEventListener('DOMContentLoaded', function () {
var element = document.querySelector("#element-123 .btn");
element.addEventListener("click", handler);
function handler() {
ga('IPTracker.send', 'event', [Category], [Action], [Label], [Value], [fieldsObject]);
}
});
</script>

For any Google Analytics event, you will need to customize the event parameters. You will need to replace the square brackets with your event fields. Please consult Google’s documentation for more information about how to configure your Google Analytics events.

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

button_gif.gif

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 and event 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 set up a Google Analytics event to track them.

Note that we offer two different code snippets for when you want to fire the same Google Analytics event for all your page forms or for when you want to fire a different Google Analytics event for each 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 ){
ga('IPTracker.send', 'event', [eventCategory], [eventAction], [eventLabel], [eventValue], [fieldsObject]);
};
</script>

Just like with event fired on button clicks, be sure to customize the event parameters as per Google’s documentation.

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 === 6 )
{
ga('IPTracker.send', 'event', [eventCategory], [eventAction], [eventLabel], [eventValue], [fieldsObject]);
}
else if ( wid === 7 )
{
ga('IPTracker.send', 'event', [eventCategory], [eventAction], [eventLabel], [eventValue], [fieldsObject]);
}
else
{
// do nothing out of a box
}
};
</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 #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. 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>
ga('IPTracker.send', 'event', [eventCategory], [eventAction], [eventLabel], [eventValue], [fieldsObject]);
</script>

Note: Google Analytics needs 24 hours to process the data received.

How to track events from different tracking platforms

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.

1. For form submissions

<script type="text/javascript">
window.instapageFormSubmitSuccess = function( form ){
// insert the content of the function
// for all the desried tracking platforms here

};
</script>

2. For button clicks

<script>
window.addEventListener('DOMContentLoaded', function () {
var element = document.querySelector("#element-123 .btn");
element.addEventListener("click", handler);
function handler() {
// insert the content of the function
// for all the desired tracking platforms here

}
});
</script>

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 a Professional Services team that can help our Enterprise users. The Enterprise Solution includes Professional Services as well as additional features and services that can be seen here: https://instapage.com/enterprise-benefits

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 to the dimension that represents that variation. 

To do that, the following code needs to be added right above the standard form or button conversion tracking:

var variantName = __variant;

This will identify the variation name from the visitor's browser, so they can attribute their conversions to that variation. Next, you will need to add another object in the event snippet: 

{dimension1: variantName}

For example, here is what an event snippet will look like after you add that:

ga("IPTracker.send", "event", "form", "submit",  {dimension1: variantName});

NOTE: You will need to change dimension1 to dimension2, dimension3, etc, depending on the index number of the GA dimension that represents the variation in question.  This can be checked in the GA account in Admin >> Property Settings >> Custom Definitions >> Custom Dimensions (Screenshot: https://d.pr/i/bwQDSZ ).

If needed, you can also refer Google Analytics’ documentation on custom dimensions: https://developers.google.com/analytics/devguides/collection/analyticsjs/custom-dims-mets

Have more questions? Submit a request
Was this article helpful?
2 out of 4 found this helpful

Need Further Help?

Tell us what you need and we will be happy to assist you.

Our team of expert support staff and our community can answer your questions. Submit a ticket, or reach out on live chat!