This is a comprehensive article to walk you through the steps of adding, as well as tracking Google Analytics Events on WordPress websites.
Plugins of Use
Google Analytics Dashboard for WP
This plugin makes it simple to add Google Analytics to your WordPress site, adding automatic outgoing link and download tracking. This creates a “Google Analytics” menu in the admin sidebar.
- Mainly used to add the actual Google Analytics profile (tracking code) to the website.
- Previously, we used Google Analytics by MonsterInsights (was owned by Yoast), but that edited the tracking function, and had trouble tracking certain outbound links.
Gravitate Event Tracking
This plugin allows you to add custom Tracking events for Google Analytics. This creates a “Gravitate Event Tracking” link in the “Settings” menu in the admin sidebar.
- Mainly used to add specific Events based on a selector/element’s CSS class or ID.
Gravity Forms Google Analytics Event Tracking
Add Google Analytics Event Tracking to Your Gravity Forms with Ease
This creates an “Event Tracking” setting option in Forms > Settings as well as Forms > Forms > your form > Settings.
- Mainly used to add specific Events based on Gravity Form submissions.
Add Google Analytics & “Events”
Before starting, it is best to have a somewhat thorough understanding of how you wish to name each component of the Event…so events that are added down-the-road can still make sense within the chosen naming convention.
Event anatomy: Category > Action > Label > Value (Optional)
Read more about the Anatomy of Events here: support.google.com/analytics/answer/1033068
An example of events set up for the Visual Matters website are:
- Subscribe > Click > Sidebar
- Subscribe > Click > Popup
- Contact > Submit > Contact Form
- Subscribe > Submit > Contact Form
- Contact > Submit > VM Guide Form
- Subscribe > Submit > VM Guide Form
- SAP Offer > Click > Header
- SAP Offer > Click > Sidebar
Add the Google Analytics Tracking Code to the Website
- Install the “Google Analytics Dashboard for WP” plugin. This is what adds the needed Google Analytics script to the website code.
- Go to Google Analytics (in the admin sidebar) to authorize the proper tracking ID (UA). prntscr.com/d82y3c
- Note, for this method to work, the Google account needs to have access to the specific Google Analytics Property View. (So you may need the client to do this step for you, or for them to share the Property View with your Google account.)
- Once authorized, navigate to the Tracking Code section, to enable track downloads, mailto and outbound links. prntscr.com/d82z2r
- It’s also good to Exclude Tracking for Administrator and Editor prntscr.com/d82zja
Log a Google Analytics “Event” When a Gravity Form is Submitted
- Install the “Event Tracking for Gravity Forms” plugin. This plugin creates an additional option in the Form Settings.
- Go to Forms > Settings > Event Tracking prntscr.com/d800pl
- Add the correct Property ID (UA code) from Google Analytics
- Now go to the form you wish to track, and go to Settings > Submission Tracking
- Add a new Event Tracking Feed (give it a Feed Name, and update the Event settings/labels if you don’t want to use the default labeling). prntscr.com/d838cj
- Note: You can also add Conditional Logic (e.g., if you want to create one event for the form submission, and ANOTHER event if someone has chosen a specific Radio Button option). prntscr.com/d838fi
Log a Google Analytics “Event” When Users Interact with HTML Elements (E.g., Buttons)
- Install the “Gravitate Event Tracking for Google Analytics” plugin. This plugin allows us to track Events based on how a user interacts (e.g., click, scroll, etc.) with elements that have specific CSS classes or IDs.
- NOTE: When you first install this plugin, it automatically creates numerous “custom” events of its own. In almost all cases, we DO NOT want to keep these. They should be deleted — otherwise they may begin logging Events within Google Analytics if they are set to Active. prntscr.com/d81ejl
- Go to Settings > Gravitate Event Tracking and delete each event (red X button to the right of each one), and Save Changes. If this doesn’t seem to work (I’ve noticed if you try to delete ALL of them, it won’t let you), you can delete all of them but 1…and just make sure it is not Active. Once you add your own custom event, you can delete the other one.
- Add your custom Events by choosing what classes/IDs the event will be attached to (e.g., aside .mc-embedded-subscribe-form #mc-embedded-subscribe) as well as what type of action will trigger it (e.g., Mouse Click). Be sure to add your custom Category name, Action name, and Label name. The Title/Description can be as descriptive as you wish. prntscr.com/d81obq
- Once you’re ready, be sure they are checked as “Active” and then Save Changes.
Verify Proper Setup
Make sure you inspect the page’s code, while logged out (e.g., via Chrome Incognito mode) and check for the Google Analytics code. It should ONLY be in there once. If it’s in there twice, you’ll need to find where the duplicate one is coming from (e.g., by another plugin, or by the theme’s settings).
Check for Proper GA Insertion Within the Code:
- There should be a call to the analytics.js file in the <head> tag: prntscr.com/d81p28
- And also the actual Analytics function script further down in the <head> tag: prntscr.com/d81ulm (note: we can see this is being done via the Google AnalyticsDashboard for WP plugin we’re using, as well as the additional tracking it’s doing)
Check that Events are Being Logged:
- Sign into Google Analytics and view the correct Property View.
- Go to Real-Time > Events and see if the Events being logged as navigate the site.prntscr.com/d81vcn (You will need to be logged out of the site, as won’t show for admin users. You can use Chrome incognito mode for this.)
- Try and not test the Events too much, as you can NOT delete logged stats from Google Analytics. If you need to do more serious testing/troubleshooting, you can install the Google Analytics Debugger extension for Chrome, so that it won’t log the Events directly in Google Analytics. chrome.google.com/webstore/detail/google-analytics-debugger/jnkmfdileelhofjcijamephohjechhna?hl=en
As always, if you notice your changes aren’t taking effect, try purging the cache: prntscr.com/d815m1.