Sunday, April 13, 2014

Forcing Google to NOT Crawl and Index Mobile Site

Let's assume you've got a desktop site and a mobile version on different subdomains or subdirectories. Google might actually index your mobile site's URLs and serve them up in desktop search results... yes, I have been a victim of this and seen it myself (see screenshot below). It is surprising, but Google can't get this right 100% of the time.
Desktop search result with mobile URL in Google index
So what do you do?

You have two main options to force Google desktop to crawl your desktop site and Google mobile to crawl your mobile site. Setup Webmaster Tools to specify this setup and/or modify your robots.txt. The Webmaster Tools option pretty much consists of registering both sites in Webmaster Tools and setting up distinct sitemaps. This still leaves a lot to chance assuming Google will take these directions when indexing your URLs. Also, this only works if your mobile site is on a different subdomain. If your mobile site resides in a subdirectory, like http://www.gtautomax.com's mobile site (http://www.gtautomax.com/mobile/), then you are left with robots.txt modification as your main option.

The strategy is to direct Googlebot and other desktop search bots away from the mobile site and allow Googlebot-Mobile and other mobile search bots to access the mobile site. (This assumes your site is already redirecting users from desktop URLs to mobile URLs automatically.)


If you have different desktop/mobile subdomains, your robots.txt will look something like this:

Desktop Site:
User-agent: Googlebot
User-agent: Slurp
User-agent: bingbot
Allow: /

User-agent: Googlebot-Mobile
User-Agent: YahooSeeker/M1A1-R2D2
User-Agent: MSNBOT_Mobile
Disallow: /

Mobile Site:
User-agent: Googlebot
User-agent: Slurp
User-agent: bingbot
Disallow: /

User-agent: Googlebot-Mobile
User-Agent: YahooSeeker/M1A1-R2D2
User-Agent: MSNBOT_Mobile
Allow: /


If your desktop/mobile sites are differentiated by subdirectory, then your robots.txt will look something like this:

Desktop Site:
User-agent: Googlebot
User-agent: Slurp
User-agent: bingbot
Disallow: /mobile/

Mobile Site:
User-agent: Googlebot-Mobile
User-Agent: YahooSeeker/M1A1-R2D2
User-Agent: MSNBOT_Mobile
Allow: /mobile/


As always, make sure and check your robots.txt file in Webmaster Tools for any errors and to ensure mobile URLs and desktop URLs are handled properly.

Friday, March 14, 2014

Google AdWords Event Based Conversion Tracking

If you've ever implemented AdWords, you've probably dropped a conversion tracking snippet in your code that looks like this:

<!-- Google Code for Conversion Page -->
<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = 123456789;
var google_conversion_language = "en";
var google_conversion_format = "3";
var google_conversion_color = "ffffff";
var google_conversion_label = "12345678-123-123456";
var google_remarketing_only = false;
/* ]]> */
</script>
<script src="//www.googleadservices.com/pagead/conversion.js" type="text/javascript">
</script>
<noscript>
<div style="display:inline;">
<img height="1" width="1" style="border-style:none;" alt="" src="//www.googleadservices.com/pagead/conversion/123456789/?label=12345678-123-123456&amp;guid=ON&amp;script=0"/>
</div>
</noscript>


This works great for success or landing pages, much like simple URL based goals in Analytics. However, just like Analytics, simple URL based goal/conversion tracking doesn't always cut it. Analytics offers Event tracking to allow more control over tracking goal conversions (even automatically).

So what about when you need to track AdWords conversions more programmatically though? For example, tracking a link click as an AdWords conversion. Luckily, the AdWords conversion logic makes this easy. See the <noscript> part of the tracking snippet? Typically the most useless part of the code, this is actually our lucky break. Throw in some jQuery and you've got event based AdWords conversion tracking! I also threw in some Analytics event tracking for good measure (the _gaq.push() portion).


$(document).ready( function() {
  $("#conversionLink").click( function() {
    $('body').append('<br /><div style="display: inline;"><img alt="" height="1" src="//www.googleadservices.com/pagead/conversion/123456789/?label=12345678-123-123456&amp;guid=ON&amp;script=0" style="border-style: none;" width="1" /></div>');
    _gaq.push(['_trackEvent','Conversion Link', 'Conversion Link Click']);
 });
});

Wednesday, November 6, 2013

Tracking Vimeo Video Events into Google Analytics, the Easy Way!

So you've got an awesome website and an awesome video hosted on Vimeo. You dropped the Vimeo hosted video into your page like so:



But now you have no way of tracking the video events in Google Analytics. Did your paid traffic play the video? Did your organic traffic complete your video? Did most people stop watching after the first 25%? These questions can now be answered by dropping in a single jQuery powered JavaScript.

Big thanks to Sander Heilbron for the original which supports ga.js, Google's widely used asynchronous tracking script. I have built on his code and added support for the Universal Analytics analytics.js syntax at https://github.com/MrRobWad/vimeo.ga.js.

The script detects which version of Analytics you have (ga.js or analytics.js) and tracks events accordingly.

Events being tracked include:
  • Vimeo played
  • Video paused
  • Video completed
  • Video skipped forward or backward
  • Video reached 25%
  • Video reached 50%
  • Video reached 75%

Thursday, October 24, 2013

No Code Required - Auto Analytics Event Tracking with Google Tag Manager #GASummit2013

Coming off of the Google Analytics Summit 2013, some exciting things have been officially announced!

The most exciting to me is an update to Google Tag Manager that allows Analytics Event Tracking to be setup without writing any code! As a developer, it is an ongoing battle to keep Analytics running at its best with some random SEO/marketing group messing around with URL based events and sloppily throwing together Analytics goals without even telling anyone. This is a dangerous practice when the person setting up the goals doesn't understand how the site works.

Event-tracking is the best solution for tracking site data in a surprisingly large number of cases, but if the client doesn't communicate their needs to the developer and the marketing company doesn't reach out either then how can the developer know that Event Tracking should be implemented? They can't... and even if there is great communication all around and all parties agree that Event Tracking should be implemented, it still takes custom coding to make it happen. With these barriers, Event Tracking surely doesn't get used as often as it should.

With the new Auto Event Tracking in Google Tag Manager, a developer simply needs to implement tracking via Tag Manager and then the client, marketing company, or developer themselves can login and add custom Event Tracking without ever editing the code on the website. Too good to be true? It kind of is... Auto Event Tracking isn't for the faint of heart. It requires some Analytics know-how and a certain degree of developer style logic to make the pieces come together. In the end, someone experienced with Analytics implementations should still be generating the Auto Event Tracking rules, but this new system does allow for much better transparency and collaboration across all parties involved.


Thanks to Justin Cutroni for a good Auto Event Tracking video tutorial of the changes and features.

I am looking forward to trying this out on my next project. Anyone implemented it already? What do you think?

Google Music Adds "I'm Feeling Lucky Mix" Automatic Playlist

Tired of Pandora and iTunes Radio playing the same songs over and over, no matter what station you listen to? That's why you listen to Google Music right? That's the case with me.

Personally, I love Google Music.... everything about it actually. Though I admit I have been waiting for a more automated way of listening. Instant Mixes are great, but are still too 'dictated' by me so they can grow stale. That is all changing as Google Music's new "I'm Feeling Lucky Mix" has added some new excitement to listening habits.

Login to Google Music and you'll see this:
 
Click the magic "I'm Feeling Lucky Mix" button and, based on my experience so far, you won't be disappointed. You can expect songs that match your listening preferences, not just a long list of songs from your most played playlists or a bunch of songs you've "thumbs up'ed" like previous attempts at this sort of thing may have you expecting. You can also expect the mix to be very diverse across all genres which makes it more interesting.

Thursday, May 16, 2013

Change Background Image with a Fade Transistion Using CSS and jQuery

I came across a question recently regarding how to use a 'fade' effect when changing/rotate through various background images. The sites I've been working on lately seem to all utilize large background imagery and I have written several custom background rotation scripts to accomplish rotating homepage hero type effects with background images. The jQuery involved is something for another posts, but the CSS to achieve a fade effect is very simple.

You can fade a background image using CSS3 transitions. I have accounted for non-CSS3 browsers in jQuery implementations using more complex strategies, but for most applications this CSS3 strategy will do just fine. It will offer a nice fade on compatible browsers and just a plain transition on others.

Set up jQuery to change the background image, but apply the transition style using the below CSS. Anytime the background changes, it will transition according to the CSS3 style.


 #header 
{
    background: url('images/header_slides/slide_1.jpg') no-repeat;
    transition: background 0.5s linear;
    -moz-transition: background 0.5s linear; /* Firefox 4 */
    -webkit-transition: background 0.5s linear; /* Safari and Chrome */
    -o-transition: background 0.5s linear; /* Opera */
}

Saturday, May 11, 2013

Using Multiple Google Accounts with Chrome

Google Chrome's ability to keep your history, bookmarks, passwords, and even tabs in sync across devices is awesome, but what happens when you bookmark a great new article for work and you are on your personal computer logged in to your personal Google account? You get to work the next day and have to sign out of your work Google account in Chrome and sign in to your personal Google account which is time consuming and too much trouble. What if you could take your work Chrome browser home with you and have access to your personal Chrome browser at work? It would be amazing right?

Well, it is possible and it truly is amazing. Imagine RDP'ing into your work computer just to access a saved login and bookmark... forget it! Now you can just switch Google accounts and Chrome and you are practically on your work computer using your work browser. How is it done? Pretty easily actually!

To setup and switch between multiple Google Account on Google Chrome:
  1. Login to Chrome with Google Account A.
  2. Click the Options/Tools/Settings icon Chrome menu.
  3. Click 'Add New User' under the 'Users' heading.
  4. Login with Google Account B.
  5. Click Google Account B in your User list and click 'Edit' to set a custom icon and account name.

  6. Switch back to Google Account A by clicking the (newly appearing) icon in the top left corner of Chrome and selecting Google Account A.
  7. Go back to the User settings and click on Google Account A and then 'Edit' to change the icon and account name, just like Step 5.

  8. You can now easily switch between accounts by clicking the icon at the top left corner of Chrome.
Limitations:
  1. You cannot have multiple accounts open in the same window. Each account must have a dedicated window.
  2. You cannot drag tabs between Chrome windows that are logged in on different accounts.