Testing pixel
1 Setting Up Your Google Analytics Pixels In Sumo (analytics.js)
Sumo supports all forms of Tracking Pixels, and a popular one is Google Analytics. Watch "Real Time" tracking events and view Google Analytics reports of your Sumo Forms in action!
Setting Up Your Google Analytics Pixels In Sumo (analytics.js)
Note: Our instructions read as if you already have Google Analytics setup on your site. If you have not done this, we recommend viewing Google's official documentation, particularly adding analytics.js to your site.
1 First, copy your Google Analytics analytics.js code. It should look similar to the following:
<script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-11111111-1', 'auto'); ga('send', 'event', 'category', 'action', 'label'); </script>
Note: UA-11111111-1 should be your Google Analytics Property ID. You can find it by logging into Google Analytics > Admin > Property Settings.
2 Next, modify the category, action, and label within the tracking pixel so that the data appears how you would like it to in Google Analytics - send and event will not be modified. The default tracking pixel is below:
ga('send', 'event', 'category', 'action', 'label');
category = typically the object that was interacted with
action = the type of interaction
label = useful for categorizing events
3 Let's create a tracking pixel that looks like the following:
ga('send', 'event', 'GAPixelForm', 'Displayed', 'Sumo');
In the tracking pixel above we configured the category to GAPixelForm, we said the action was Displayed because tracking pixels are set to fire when a form is displayed, and we used the label, Sumo, because it was a Sumo form that was displayed.
4 After making the changes above, the Tracking Pixel should read as follows:
<script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-11111111-1', 'auto'); ga('send', 'event', 'GAPixelForm', 'Displayed', 'Sumo'); </script>
5 Once this is done, paste the pixel in the Tracking Pixels text area within the Success tab of your Sumo form.
6 For your conversion pixel simply repeat the steps above, but only use the send/event line below:
<script> ga('send', 'event', 'category', 'action', 'label'); </script>
7 Next, modify the category, action, and label again. Let's use GAPixelForm because that's the form your visitors are viewing, and let's call the action Subscribed because this pixel will fire when a visitor subscribes through a Sumo form, and let's use the label Sumo again.
ga('send', 'event', 'GAPixelForm', 'Subscribed', 'Sumo');
8 Now paste this code inside the Subscribe Pixels text area:
<script> ga('send', 'event', 'GAPixelForm', 'Subscribed', 'Sumo'); </script>
9 That's it :) Now that your event codes are in place you can verify your tracking and conversion pixels are working.
Pro tip: Sumo executes javascript placed within the Tracking Pixel, Subscribe Pixel, or Click Pixel text areas upon the popup displaying (Tracking Pixel), visitors subscribing via your Sumo popup (Subscribe Pixel), or visitors clicking the CTA button within your popup (Click Pixel). Whatever javascript you write will fire upon one of those three events. Sumo does not alter the javascript in any way.
Setting Up Your Google Analytics Pixels In Sumo (gtag.js)
Note: Our instructions read as if you already have Google Analytics setup on your site. If you have not done this, we recommend viewing Google's official documentation, particularly adding gtag.js to your site.
1 First, copy your Google Analytics analytics.js code. It should look similar to the following:
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'GA_MEASUREMENT_ID'); </script>
Note: UA-11111111-1 should be your Google Analytics Property ID. You can find it by logging into Google Analytics > Admin > Property Settings.
2 Next, modify the eventName, and eventParameters object. The default tracking pixel is below:
gtag('event', <action>, { 'event_category': <category>, 'event_label': <label>, });
eventName = the name of the event you want to log, such as 'Displayed'
eventParameters object = an object that includes the event_category' and the 'event_label'
3 Let's create a tracking pixel that looks like the following:
gtag('event', 'Displayed', { 'event_category' : 'GAPixelForm', 'event_label' : 'Sumo' });
In the tracking pixel above we configured the event_category to GAPixelForm, we said the action was Displayed because tracking pixels are set to fire when a form is displayed, and we used the event_label, Sumo, because it was a Sumo form that was displayed.
4 After making the changes above, the Tracking Pixel should read as follows:
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXX-X"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-XXXXXXXX-X'); gtag('event', 'Displayed', { 'event_category' : 'GAPixelForm', 'event_label' : 'Sumo' }); </script>
5 Once this is done, paste the pixel in the Tracking Pixels text area within the Success tab of your Sumo form.
6 For your conversion pixel simply repeat the steps above, but only use the send/event line below:
gtag('event', <action>, { 'event_category': <category>, 'event_label': <label>, });
7 Next, modify the event_category, action, and event_label again. Let's use GAPixelForm because that's the form your visitors are viewing, and let's call the action Subscribed because this pixel will fire when a visitor subscribes through a Sumo form, and let's use the event_label Sumo again.
gtag('event', 'Subscribed', { 'event_category' : 'GAPixelForm', 'event_label' : 'Sumo' });
8 Now paste this code inside the Subscribe Pixels text area:
<script> gtag('event', 'Subscribed', { 'event_category' : 'GAPixelForm', 'event_label' : 'Sumo' }); </script>
9 That's it :) Now that your event codes are in place you can verify your tracking and conversion pixels are working.
Pro tip: Sumo executes javascript placed within the Tracking Pixel, Subscribe Pixel, or Click Pixel text areas upon the popup displaying (Tracking Pixel), visitors subscribing via your Sumo popup (Subscribe Pixel), or visitors clicking the CTA button within your popup (Click Pixel). Whatever javascript you write will fire upon one of those three events. Sumo does not alter the javascript in any way.
Viewing Your Data In Google Analytics
1 In order to view your Sumo pixel data, go back to your Google Analytics Page and access the Property that is designated within your pixels.
2 For Real Time tracking click on Real-Time > Events.
3 Now load up your site in a Google Chrome Incognito Window or a Privacy Mode window in your preferred browser and fire your Popup and watch your Real Time Data roll in.
