If you perform Internet marketing functions for enough clients, you’re bound to run across this problem at one point or another.  What do you do when you are trying to track a goal or conversion but the URL does not change after action is taken?  This happens most often when people submit lead forms–you hit “Submit” and the form posts but the entire page does not refresh.  Far too many people just end up giving up, and then, are unable to track their campaign performance.  Others will set that form page as a goal / conversion so anyone who sees the lead form counts as a win whether they complete the form or not. There has to be a better way, right?  Well there is, or actually, there are.  Below are several ways to track these conversions along with examples.  I’ll do my best to break this down for the novice developer but some basic HTML / Javascript skills are required.

For Analytics-based tracking, these tips are for Universal Analytics and calls to analytics.js.  If your implementation still calls ga.js, we will provide links to Google’s Developer resources for legacy implementations (though you should strongly consider upgrading your implementation to analytics.js)

1. Analytics Event Tracking

Event Tracking is a fairly powerful and very underutilized function in Google Analytics that allows you to track things like button clicks, video plays, or file downloads.  Event tracking makes a call to ga.js in order to notate non-pageview items on your website.  The results will show up in the “Events” reports under the “Content” section of Google Analytics.  You can also define an event as a goal.  For our purposes, we want to track people who press the “Submit” button on the lead form.

In this example, we only need to focus on the “Submit” button in the code.  Below is a generic example of such a button.

<input type=”button” id=”subbtn” value=”Submit;” />

To add event tracking to this button, we’ll need a minimum of 3 basic elements:

• Call the ga() function to send an event
• An event category (a grouping that you determine for the event, i.e. “lead forms”)
• An event action (what the user is doing to trigger the event, i.e. “submit”)

Labels (additional information you want to provide about the event) and values (similar to a goal value) can also be added but are not required.  We’ll omit them for simplicity.

After adding that information, here is how our new code should look:

<input type=”button” id=”subbtn” value=”Submit” onClick=”ga(‘send’, ‘event’, ‘Form’, ‘Submit’);” />

Click here to visit the Google Developer resources for ga.js implementations.

Please note that this is not a perfect solution.  If a user clicks the “Submit” button more than once, the event may be duplicated.  Also, if somebody does not fill out the form in its entirety and receives an error upon submitting, it will still track as an event even if they do not go back and complete the form.  If you have some sort of form validation in place, you can modify the code to only run if the submission was successful but that will vary by the type of form you’re using.

2. Analytics On-Click Virtual Pageviews

The _trackPageview function is another call to ga.js that allows you to artificially generate a pageview when an actual pageview does not take place.  This is quite useful for many of the same reasons as Event Tracking, and has the added benefit of showing up as a pageview in your content reports.  For example, if you have an AJAX shopping cart, you can use this function to tell which step of the checkout a user abandons.  This is also common if you have PDFs on your site for sales info, forms, restaurant menus, etc. Virtual pageviews can also be turned into goals, just like a standard pageview goal.

For this tracking function, let’s assume your checkout is all on one page but requires users to click “continue” to reach separate sections.  Below is the existing code example:

<button type=”button” id=”continueCheckout” onclick=”billing.save()”></button>

(user clicks that button, and then, the following div loads)

<div id=”checkout-step-payment”>

With virtual pageviews, we only need to create the call to ga() function to send a pageview and provide the naming convention for the virtual URL.  There are numerous ways to call these actions but we’ll use an onclick event to do so here.  Below is the modified example:

<button type=”button” id=”continueCheckout” onclick=”billing.save(); javascript: ga(‘send’, ‘pageview’, ‘/checkout/payment/’);“></button>

Click here to visit the Google Developer resources for ga.js implementations.

In this example, the semi-colon at the end of the existing onclick event is important so the browser knows to look for additional items when the button is clicked.

3. Conversion Code in a div that Loads after Submission.

In many forms, the user is greeted with a “thank you” message that appears on the page upon hitting submit but the URL does not change.  Generally, this type of response is called by PHP and the specifics of it can vary by the type of form you’re using.  However, if your site is developed in PHP, there’s a good chance your form page will have a section like the one below:

<?php if ( $success ) echo “<p>Thanks for sending your message! We’ll get back to you shortly.</p>” ?>

This is your opportunity to add your AdWords / AdCenter tracking code.  Simply paste the code you get from the PPC channel into the response message and it will appear after a user successfully submits your form.  Even though this is pretty straightforward, I have an example below (please substitute with your own PPC conversion code or this won’t work).

<?php if ( $success ) echo “<p>Thanks for sending your message! We’ll get back to you shortly.  <!– Google Code for Conversion Page –>

<script type=”text/javascript”>

/* <![CDATA[ */

var google_conversion_id = XXXXXXXXX;

var google_conversion_language = “en”;

var google_conversion_format = “3”;

var google_conversion_color = “ffffff”;

var google_conversion_label = “XXXXXXXXXXXXXXXXXXX”;

var google_conversion_value = 0.00;

var google_conversion_currency = “USD”;

var google_remarketing_only = false;

/* ]]> */

</script>

<script type=”text/javascript” src=”//www.googleadservices.com/pagead/conversion.js”>

</script>

<noscript>

<div style=”display:inline;”>

<img height=”1″ width=”1″ style=”border-style:none;” alt=”” src=”//www.googleadservices.com/pagead/conversion/XXXXXXXXX/?value=0.00&amp;currency_code=USD&amp;label=XXXXXXXXXXXXXXXXXXX&amp;guid=ON&amp;script=0″/>

</div>

</noscript>

</p>” ?>

4. On-Click Conversions with Call Tracking

This fairly new feature of AdWords allows you to track click-to-call actions on your website as conversions.  This is great for mobile traffic or desktop users that have Skype (or a similar VOIP solution) installed.  AdWords will also report conversions for visitors who manually dial the phone number displayed on the web page.  When you create a new conversion in AdWords, you’ll now see an option to track Phone Calls.

The conversion code is below, and has a few key differences from a standard conversion.

<script type=”text/javascript”>

(function(a,e,c,f,g,b,d){var h={ak:”XXXXXXXXX”,cl:”XXXXXXXXXXXXXXXXXXX”};a[c]=a[c]||function(){(a[c].q=a[c].q||[]).push(arguments)};a[f]||(a[f]=h.ak);b=e.createElement(g);b.async=1;b.src=”//www.gstatic.com/wcm/loader.js”;d=e.getElementsByTagName(g)[0];d.parentNode.insertBefore(b,d);a._googWcmGet=function(b,d,e){a[c](2,b,h,d,null,new Date,e)}})(window,document,”_googWcmImpl”,”_googWcmAk”,”script”);

</script>

For one, it’s all javascript.  Due to the nature of this conversion type, there is no way a script-free pixel can fire so users must have javascript enabled.

Beyond that, you need to have some extra code to make this conversion type work.  The code above goes on any page with your phone number listed.  To activate the conversion, you need to add a second piece of code to call the _googWcmGet() function and replace your phone number with a Google forwarding number when someone visits your site through an AdWords ad.  There are a few different options for implementing this piece, but the most straightforward is to create a “number” class and place your number in appropriate spans.  Here is an example:

<body onload=”_googWcmGet(‘number’,’555-555-1234’)”>

<span class=”number”>555-555-1234</span>

</body>

Now every time an AdWords visitor calls you from your site, a conversion will be triggered in AdWords. You can also define conversions based on the length of the call. It’s quite simple to implement and very valuable for companies that receive a lot of phone leads.