[fusion_builder_container hundred_percent="yes" overflow="visible"][fusion_builder_row][fusion_builder_column type="1_1" background_position="left top" background_color="" border_size="" border_color="" border_style="solid" spacing="yes" background_image="" background_repeat="no-repeat" padding="" margin_top="0px" margin_bottom="0px" class="" id="" animation_type="" animation_speed="0.3" animation_direction="left" hide_on_mobile="no" center_content="no" min_height="none"][fusion_text]
The Simple Guide To Dynamic AJAX Conversion Tracking On Adwords
Ever wanted to track AdWords conversions without going to a new page? Trying to track conversions on a live chat plugin, an AJAX form, or using page interactions? Tired of only tracking conversion on page load? Read on.
Background And Reasoning
Modern web applications allow the filling of a form, purchase, or activation of a live chat plugin without a page load. A page load is no longer a good indicator of a conversion, so why is everyone still doing it? Because documentation for conversion tracking without page loads is lacking and google AdWords support(as good as they are) has no idea how to do it since it’s part of their Google Analytics product.
How Is Conversion Tracking Done Without A Page Load?
If you search you'll find a ton of either outdated or useless answers. The solution actually lies in Google Analytics and the ability to link an Analytics "goal" and "event" to a conversion within AdWords.
So How Is It Done?
First of all, you need to ditch the code provided by AdWords conversion tracking. Such tracking is great for page loads but isn’t designed to work in AJAX pages or Single Page Applications in frameworks like Angular. Forget ga.js if you’re still using it(it’s outdated anyways). AdWords conversion tracking is also useless, don’t bother trying to work with it, the code isn’t meant to run on anything but a page load. You need to integrate with Analytics.
Using Google Analytics Instead Of AdWords To Track Conversion Events Using AJAX
The code you want is actually part of Google Analytics. Don’t worry about that, you can actually send conversion events from analytics back to AdWords, and it’s definitely a better solution. Shortly, you want to track an event, you tell Google Analytics the event is a conversion, then use AdWords to assign that event to a conversion metric. It’s easier than it sounds.
Using analytics.js for AJAX and SPA conversion tracking.
Firstly, check out the API documentation for google analytics.js . This is what you use to track page conversions. In this usage, what you actually want to track is events rather than conversion, because you can use Analytics to mark the event as a conversion with a lot more flexibility. The API exposes an easy to use JavaScript method with the format ga(‘send’,’event’,’category’,’action’,’label’). There are some more optional fields but this all I’m going over since the others are not important for getting it working. Include analytics.js on your page and get the library properly sending events to your Analytics account.
Getting Google Analytics Code Working On Your Page.
- First, you want to make sure you have google analytics setup on your site. This is covered elsewhere so I’ll leave a link, just make sure it’s functioning correctly before going farther.
- Next, make sure your google analytics and adwords accounts are linked. There’s also many tutorials on how to do this so I won’t cover it here. Just follow the link for Google's excellent explanation
Okay, So Analytics Works, What Now?
It’s as easy as including the script and doing a ga(‘send’,’event’,xxxxx) call. The category, action, and label are arbitrary (see above event definition) and only serve to segregate your events to a specific page and action. The first two arguments MUST be ‘send ’ and ‘event’ or analytics will explode, the others I (and Google) recommend segregating by page and event type.
Setting Up A Tracking Event
Try to use Google’s javascript analytics.js library to push a random event from your page to your Analytics account. There are two great tools to help out with this. First is the debug version of Google Analytics. Simply install the chrome plugin and activate it when browsing your site. It will temporarily replace your analytics.js with a debug version that logs to the javascript error console. This is great for checking to make sure your event is properly sent to your Analytics account. Just hit f12 for Dev Tools in Chrome and check the console when the debugging is running and you’ll see what is being sent over and any errors.
The Other Wonderful Tool
This is Google Analytics real-time data. You can get find it by learning how to find real time data in the Analytics maze. Without it, you will have to wait many hours to see your event sent to GA and know it’s working. Go to realtime console(follow the last link for details) and see if you can send an event in real time. This can be used for debugging as well to make sure you send the right field values and that Google actually picks up your AJAX call.
Setting Up An Event Goal In Google Analytics
So you can see your event triggered in Analytics realtime? Awesome. Time to tell Analytics that this event is actually a conversion. First, Check out the Analytics page on setting up goals. You'll quickly notice this page is borderline useless(sorry for sending you there), so let me explain the steps to match an event up to a goal.[/fusion_text][fusion_text]
First Go To The Analytics Homepage And Choose Your Site
then pick the admin tab at the top and choose "Goals". See screencap.[/fusion_text][fusion_imageframe lightbox="no" lightbox_image="" style_type="none" hover_type="none" bordercolor="" bordersize="10px" borderradius="0" stylecolor="" align="none" link="" linktarget="_self" animation_type="0" animation_direction="down" animation_speed="0.1" hide_on_mobile="no" class="" id=""] 
[/fusion_imageframe][fusion_text]
Then Hit The "+New Goal" Button
[/fusion_text][fusion_imageframe lightbox="no" lightbox_image="" style_type="none" hover_type="none" bordercolor="" bordersize="10px" borderradius="" stylecolor="" align="none" link="" linktarget="_self" animation_type="0" animation_direction="down" animation_speed="0.1" hide_on_mobile="no" class="" id=""] 
[/fusion_imageframe][fusion_text]
You'll Be Taken To A Create Page Where You Can Select A Goal Type. You Probably Want To Choose Custom Because It Is.
[/fusion_text][fusion_imageframe lightbox="no" lightbox_image="" style_type="none" hover_type="none" bordercolor="" bordersize="10px" borderradius="0" stylecolor="" align="none" link="" linktarget="_self" animation_type="0" animation_direction="down" animation_speed="0.1" hide_on_mobile="no" class="" id=""] 
[/fusion_imageframe][fusion_text]
For The Goal Description Type, Make Sure You Select Event
[/fusion_text][fusion_imageframe lightbox="no" lightbox_image="" style_type="none" hover_type="none" bordercolor="" bordersize="10px" borderradius="0" stylecolor="" align="none" link="" linktarget="_self" animation_type="0" animation_direction="down" animation_speed="0.1" hide_on_mobile="no" class="" id=""] 
[/fusion_imageframe][fusion_text]
Goal Details Is What Puts Everything Together
Here you want to make ABSOLUTELY SURE that your goal matches the event details you put in wayyy back when we were implementing the event tracking code on your page. Make sure the debug version of analytics is reporting the call, and make sure Google realtime analytics is reporting the same event details as well, just for good measure.[/fusion_text][fusion_imageframe lightbox="no" lightbox_image="" style_type="none" hover_type="none" bordercolor="" bordersize="10px" borderradius="0" stylecolor="" align="none" link="" linktarget="_self" animation_type="0" animation_direction="down" animation_speed="0.1" hide_on_mobile="no" class="" id=""] 
[/fusion_imageframe][fusion_text]
Great, I Have A Conversion Event Setup In Analytics, How Do I Get It Into AdWords?
I'm glad you asked. Go to your AdWords Homepage and select the right campaign. Hit the "Tools" menu on top and choose "Conversions". You want to import the conversion from Analytics, so choose "Google Analytics" as the source[/fusion_text][fusion_imageframe lightbox="no" lightbox_image="" style_type="none" hover_type="none" bordercolor="" bordersize="10px" borderradius="0" stylecolor="" align="none" link="" linktarget="_self" animation_type="0" animation_direction="down" animation_speed="0.1" hide_on_mobile="no" class="" id=""] 
[/fusion_imageframe][fusion_text]
Now Select The Event You Created Earlier
[/fusion_text][fusion_imageframe lightbox="no" lightbox_image="" style_type="none" hover_type="none" bordercolor="" bordersize="10px" borderradius="0" stylecolor="" align="none" link="" linktarget="_self" animation_type="0" animation_direction="down" animation_speed="0.1" hide_on_mobile="no" class="" id=""] 
[/fusion_imageframe][fusion_text]
BOOM.
You now have AJAX linked conversion tracking enabled. If you liked my tutorial or have questions feel free to contact us or send an email to our software development team.
[/fusion_text][/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]