If you have ever managed a paid search campaign with Google Adwords, you have probably set up a “conversion”. Conversions are actions that a visitor can take while visiting your website. It could be a sign up, demo request or an item purchase. It could be anything that you decide is valuable to track related to your business goals.
You can measure conversions by pasting a short block of code generated by Adwords on a “thank you” page. The thank you page is simply where a visitor lands after they take a conversion action. For example, on an e-commerce site, a thank you page is usually an order confirmation or receipt for the product(s) purchased.
No “Thank You”
But what if the conversion action you want to measure doesn’t have a unique thank you page? Here are a few common scenarios where this might be the case:
- Tracking RSS subscriptions
- Tracking whitepaper downloads
- New registrations that lead to a common homepage
Maybe your conversion action has a thank you page, but it’s shared by other conversion paths. This can lead to mixed, inaccurate reporting.
Our solution is to track where a visitor clicks, rather than where they land.
How to Track Clicks as Conversions:
Step 1: Generate the Conversion Code in Adwords
After you log into Adwords, click Tools and Analysis > Conversions.
Click the “New conversion” button and follow the instructions to set up a new conversion. You will be given a block of code that’s meant for a thank you page. Keep this tab open.
Step 2: Add JavaScript to the <head> Section
Find the page in your CMS where you want to track a click. Add the following code somewhere before the </head> tag on the page:
<script type=”text/javascript”> function setIframe() {var conversion = document.getElementById(‘conv’).innerHTML = ‘<iframe src=”conversion.html” style=”border:none;width:1px;height:1px;” marginheight=”0″ marginwidth=”0″ frameborder=”0″></iframe>’;} </script>
Note: If you are using WordPress as a CMS, you cannot paste JavaScript directly into the post/page. Use this plugin to insert JavaScript on any page/post.
What This Does: This code will pull in a unique thank you page (“conversion.html”) containing your conversion code via an iframe. You’ll create this page in step 4. Since we can’t send the visitor to a thank you page, we will bring the thank you page to them!
Step 3: Modify Your Button/Link to Track Clicks
Find the code that displays your button or link.
For example, the code for the button above could look like this:
<a href=”http://www.yoursite.com/whitepaperdownload.pdf”> <img src=”http://www.yoursite.com/btn.png” ></a>
(a) Add this line of code to the link:
onclick=”setTimeout(setIframe,2000);”
Now it should look like this:
<a href=”http://www.yoursite.com/whitepaperdownload.pdf” onclick=”setTimeout(setIframe,2000);”> <img src=”http://www.yoursite.com/btn.png” ></a>
(b) Now, add this new div right after your link:
<div id=”conv” style=”display:none;”></div>
This is what it should look like at the end:
<a href=”http://www.yoursite.com/whitepaperdownload.pdf” onclick=”setTimeout(setIframe,2000);”> <img src=”http://www.yoursite.com/i/btn.png” ></a>
<div id=”conv” style=”display:none;”></div>
Note: If you need to do this for a button within a form, no problem. Just paste the onclick function before the closing bracket “>”. The div can be pasted in after the form code.
What This Does: It creates a space to display an iframe on your page. It also tells the browser to pull in the tracking code after a visitor clicks the image/link. This all happens in the blink of an eye and is not visible to the visitor.
Step 4: Create a Page That Contains Your Tracking Code
Still have that conversion tracking code from Step 1? Create a new page named, “conversion.html”. Paste your code in this blank page and save it.
What This Does: This page contains your conversion code and gets pulled in through the invisible iframe after a visitor clicks the download button. Instead of sending a visitor to this page, we bring the page to them after they click.
Step 5: Verify Your Conversion
Lastly, you will want to verify that your conversion is set up correctly. The simplest way to do this is to wait until your ad is live and see if conversions are recorded. However, if you don’t mind spending money on your own click, you can test right away by clicking one of your own ads and following the path to conversion.
That’s it! If you would like to track multiple conversions based on clicks, just repeat the process and change the filename in steps 1 and 4 for your thank you page. Thanks to Traian for the original JavaScript.
Hey Josh.
Thanks a lot for posting this code. It’s exactly what I want and I’ve tried implementing it (I do a bit of coding) but haven’t had any luck with a conversion actually being tracked.
It’s on the page http://www.excelsiors.org/somanabolic-muscle-maximizer-review/ and is installed on all of the links within the review.
Any idea what’s going on?
Also would each link need right after it or could I just put one at the bottom of the post?
Thanks for all your help!
Sarah
Hi Sarah – I apologize for the late reply! I didn’t see any links on your review page, perhaps you’ve made changes since this comment. Feel free to give me a shout on Twitter @joshuasturgeon
Nice one just what I was looking for, will this work for someone clicking on an email link to email the webmaster?
Thanks Carl
Hi Carl,
Glad it was helpful! This should work fine for your email link. The only difference from the example above is that you are using a mailto: link instead of a normal URL. But the “onClick” JavaScript can be placed in the same position.
Hey Josh I’m having some issues with this, I tested it on my own site in the email link here: http://cpsmedia.co.uk/contact/ any idea why its not working????