Google Analytics Integration

Set up Google Analytics Goal Tracking for a Contlo Form in order to track goals and conversions, and also improve your Google Ads targeting! Just add a code snippet to your website to send Contlo Form data and set up a corresponding goal in Google Analytics.

Track Events triggered using a Contlo Form in Google Analytics

You can track Contlo forms activity in Google Analytics by adding an event listener code snippet and then executing different Google Analytics tracking calls for each type of event. This code must be pasted in the main theme/index file of your site.

• Paste the code snippet within the 'head' tags of your website where you would want to use Contlo forms and track its events in Google Analytics
• Store Type
  • Shopify:
    • If you're using Shopify, paste the snippet into your theme.liquid file on a new line above the closing 'body' tag.
    • Note that if you are using custom product pages, you may need to add this snippet to a different theme file, or to your individual custom product pages.
    • If you’re using Shopify 2.0, add the code to a Custom Liquid block
  • Custom Ecommerce store
    • You will need to paste the snippet code in the of every page you would want to track Contlo events.

Below is the generic code for tracking all Contlo Forms event types in Google Analytics.

🚧

This will NOT work for a Custom Ecommerce store.

<script>
    window.addEventListener("contloForms", function(e) {
        if (e.detail.event_type == 'show_form') {
            ga('send', 'event', 'Contlo form', 'form_open', e.detail.form_id);
        }
        if (e.detail.event_type == 'submit_form') {
            ga('send', 'event', 'Contlo form', 'form_submit', e.detail.form_id);
        }
        if (e.detail.event_type == 'submit_step') {
            ga('send', 'event', 'Contlo form', 'form_step_submit', e.detail.form_step_id);
        }
        if (e.detail.event_type == 'redirect_form' || e.detail.event_type == 'button_click') {
            ga('send', 'event', 'Contlo form', 'form_url_redirect', e.detail.form_id);
        }
        if (e.detail.event_type == 'applied_code') {
            ga('send', 'event', 'Contlo form', 'form_discount_applied', e.detail.form_id);
        }
        if (e.detail.event_type == 'close_form') {
            ga('send', 'event', 'Contlo form', 'form_close', e.detail.form_id);
        }
    });
</script>

If you use gtag.js to load Google Analytics, use the JavaScript below instead [Reference].

🚧

This will work for a Shopify AND a Custom Ecommerce store.

<script>
    window.addEventListener("contloForms", function(e) {
        if (e.detail.event_type == 'show_form') {
            gtag('event', 'form_open', {'form': 'Contlo form', 'form_id': e.detail.form_id});
        }
        if (e.detail.event_type == 'submit_form') {
            gtag('event', 'form_submit', {'form': 'Contlo form', 'form_id': e.detail.form_id});
        }
        if (e.detail.event_type == 'submit_step') {
            gtag('event', 'form_step_submit', {'form': 'Contlo form', 'step_name': e.detail.form_step_id});
        }
        if (e.detail.event_type == 'redirect_form' || e.detail.event_type == 'button_click') {
            gtag('event', 'form_url_redirect', {'form': 'Contlo form', 'form_id': e.detail.form_id});
        }
        if (e.detail.event_type == 'applied_code') {
            gtag('event', 'form_discount_applied', {'form': 'Contlo form', 'form_id': e.detail.form_id});
        }
        if (e.detail.event_type == 'close_form') {
            gtag('event', 'form_close', {'form': 'Contlo form', 'form_id': e.detail.form_id});
        }
    });
</script>

Test your tracking code

Once you’ve installed the tracking code on your site, you can test it to ensure data is being tracked. To test your code:

1. Navigate to your website and interact with your form (e.g., submit or close it)
2. Open Google Analytics and open Real Time > Events
3. Click Events (last 30 min) to see your last 30 minutes of events
4. Under Event Category, you should see Contlo form, with the action you took on the same row in the Event Action column

If you don’t see your events, make sure Google Analytics is set up correctly, and that the code snippet you used is correct.

📘

Please note:

Google Analytics goal tracking takes 24-48 hours to update; goals will not appear in real-time.

References

• https://support.google.com/analytics/answer/10269537?hl=en

Explanation with a flow as an example

Table of Contents

1. ⚓ E-commerce store on a supported platform (Shopify)
   1. ⚓ Linking Contlo to Shopify
   2. ⚓ Linking GA to Shopify
   3. ⚓ Linking Contlo to GA
   4. ⚓ How to check if all 3 have been linked together correctly
2. Custom E-commerce store
   1. ⚓ Linking Contlo to Custom E-commerce store
   2. ⚓ Linking GA to Custom E-commerce store
   3. ⚓ Linking Contlo to GA
   4. ⚓ How to check if all 3 have been linked together correctly

E-commerce store on a supported platform (Shopify)

Linking Contlo to Shopify

Assuming this has already been done.

Linking GA to Shopify

Please refer to the following reference(s).

This is on GA Website

• For Universal Analytics [GA3] -Set up Analytics for a website (Universal Analytics) OR
• For Google Analytics 4 [GA4] - [GA4] Set up Analytics for a website and/or app

This is on Shopify Website

• For Universal Analytics [GA3]
  • Please copy the 'Global Site Tag (gtag.js)' (for UA) code snippet as depicted in the above references. That then has to be pasted in Online Store -> Preferences -> Google Analytics on the Shopify website.
• For Google Analytics 4 [GA4]
  • Please copy the 'Google tag (gtag.js)' (for GA4) code snippet as depicted under the "Add the tag to a website builder or CMS-hosted website (e.g., WordPress, Shopify, etc.)" section of this page and then follow these instructions

Linking Contlo to GA

This is on Shopify Website

📘

Please note:

Add a dummy product on Shopify, if you don't already have any products added. This will be required for testing.

Goal is to link GA to Contlo. How can we go about doing that?

Steps

1. "Edit code" of the theme ("Online Store" -> "Themes" -> Horizontal ellipsis -> "Edit code")
2. Open theme.liquid
   1. Just above the 'body' closing tag (right at the bottom of the theme.liquid file), paste the generic code for tracking all Contlo Forms event types in Google Analytics (depending on whether it's a tag.js setup or not)
      1. For Universal Analytics [GA3]

         <script>
             window.addEventListener("contloForms", function(e) {
                 if (e.detail.event_type == 'show_form') {
                     ga('send', 'event', 'Contlo form', 'form_open', e.detail.form_id);
                 }
                 if (e.detail.event_type == 'submit_form') {
                     ga('send', 'event', 'Contlo form', 'form_submit', e.detail.form_id);
                 }
                 if (e.detail.event_type == 'submit_step') {
                     ga('send', 'event', 'Contlo form', 'form_step_submit', e.detail.form_step_id);
                 }
                 if (e.detail.event_type == 'redirect_form' || e.detail.event_type == 'button_click') {
                     ga('send', 'event', 'Contlo form', 'form_url_redirect', e.detail.form_id);
                 }
                 if (e.detail.event_type == 'applied_code') {
                     ga('send', 'event', 'Contlo form', 'form_discount_applied', e.detail.form_id);
                 }
                 if (e.detail.event_type == 'close_form') {
                     ga('send', 'event', 'Contlo form', 'form_close', e.detail.form_id);
                 }
             });
         </script>
         

      2. For Google Analytics 4 [GA4]

         <script>
             window.addEventListener("contloForms", function(e) {
                 if (e.detail.event_type == 'show_form') {
                     gtag('event', 'form_open', {'form': 'Contlo form', 'form_id': e.detail.form_id});
                 }
                 if (e.detail.event_type == 'submit_form') {
                     gtag('event', 'form_submit', {'form': 'Contlo form', 'form_id': e.detail.form_id});
                 }
                 if (e.detail.event_type == 'submit_step') {
                     gtag('event', 'form_step_submit', {'form': 'Contlo form', 'step_name': e.detail.form_step_id});
                 }
                 if (e.detail.event_type == 'redirect_form' || e.detail.event_type == 'button_click') {
                     gtag('event', 'form_url_redirect', {'form': 'Contlo form', 'form_id': e.detail.form_id});
                 }
                 if (e.detail.event_type == 'applied_code') {
                     gtag('event', 'form_discount_applied', {'form': 'Contlo form', 'form_id': e.detail.form_id});
                 }
                 if (e.detail.event_type == 'close_form') {
                     gtag('event', 'form_close', {'form': 'Contlo form', 'form_id': e.detail.form_id});
                 }
             });
         </script>
         

How to check if all 3 have been linked together correctly

Steps on the Contlo App

1. Create a sample "Forms".
2. If you want to test all the 6 events, you can add a "Product Block" to get a form_url_redirect callback, a "Blank Step" to have a form_step_submit step and a "Discount Code" to have a form_discount_applied step. form_open, form_submit and form_close should be available in all forms by default.

🚧

Internal Note:

Relevant for when testing on a shopify store that is not live

Once the form has been added and you're testing to see if the GA stats appear, make sure you don't directly type in the URL for your Shopify store (which is still not open to the public) but instead 'Preview' your Shopify store. This will ensure your events appear on the GA dashboard.

3. Once the Contlo form has been created for your Shopify website (which had previously been linked to Contlo), you should now be able to -> Use Contlo's forms, display them on your Shopify website and have their events added to your Google Analytics account!

Custom E-commerce store

Linking Contlo to Custom E-commerce store

Please refer to this

Linking GA to Custom E-commerce store

Please refer to the following reference(s).

This is on GA Website

• For Universal Analytics [GA3] -Set up Analytics for a website (Universal Analytics) OR
• For Google Analytics 4 [GA4] - [GA4] Set up Analytics for a website and/or app

This is on the Custom E-commerce store Website

• Please copy the 'Global Site Tag (gtag.js)' (for UA) or 'Google tag (gtag.js)' (for GA4) code snippet as depicted in the above references. That then has to be pasted in the of every page you would want to track Contlo events.

Linking Contlo to GA

Paste the following code snippet into the of every page you would want to track Contlo events.

<script>
    window.addEventListener("contloForms", function(e) {
        if (e.detail.event_type == 'show_form') {
            gtag('event', 'form_open', {'form': 'Contlo form', 'form_id': e.detail.form_id});
        }
        if (e.detail.event_type == 'submit_form') {
            gtag('event', 'form_submit', {'form': 'Contlo form', 'form_id': e.detail.form_id});
        }
        if (e.detail.event_type == 'submit_step') {
            gtag('event', 'form_step_submit', {'form': 'Contlo form', 'step_name': e.detail.form_step_id});
        }
        if (e.detail.event_type == 'redirect_form' || e.detail.event_type == 'button_click') {
            gtag('event', 'form_url_redirect', {'form': 'Contlo form', 'form_id': e.detail.form_id});
        }
        if (e.detail.event_type == 'applied_code') {
            gtag('event', 'form_discount_applied', {'form': 'Contlo form', 'form_id': e.detail.form_id});
        }
        if (e.detail.event_type == 'close_form') {
            gtag('event', 'form_close', {'form': 'Contlo form', 'form_id': e.detail.form_id});
        }
    });
</script>

How to check if all 3 have been linked together correctly

Steps on the Contlo App

1. Create a sample "Forms".
2. Once the Contlo form has been created for your Custom E-commerce store (which had previously been linked to Contlo), you should now be able to -> Use Contlo's forms, display the form on your Custom E-commerce website and have their events added to your Google Analytics account!