Universal Analytics: Weather As A Custom Dimension

Share Share on Google+333Tweet about this on Twitter194Share on LinkedIn24Share on Facebook42

I’ve fallen in love with Universal Analytics and Google Tag Manager. Together they form an incredibly powerful tool for marketing professionals. In most cases, I no longer need to post recommendations to my client for yet another page template revision, since with the tag manager in place, I can just add custom code via the admin panel. Add to that the power of Universal Analytics with its ultra-sensitive Measurement Protocol, and the ability to craft custom dimensions and metrics, and voila! I’m in a happy place.

In this post, I take you through a short JavaScript dev journey of utilizing weather data as a custom dimension in your site’s Analytics. You only need to have Universal Analytics and Google Tag Manager installed on your site.

The end result

This is what you get:
Weather as a Custom Dimension
As you can see, I’ve created a custom report which shows visits, pageviews and conversion rates (Pages / Visit > 2) for various weather conditions. This report unequivocally, with a plain-as-day-without-a-doubt display of causality, proves that when it rains, people are more likely to convert. I should do more targeting to British audiences…

Create a new tag in GTM

1. Name the tag “Weather API”
2. Choose Custom HTML Tag as the tag type
3. Enter the following code into the HTML field (Note! You need to load jQuery for this to work! See here for more information):

<script>
  var lat = geoplugin_latitude();
  var lon = geoplugin_longitude();
  var weather = "";
  var weatherAPI = "http://api.openweathermap.org/data/2.5/weather?lat="+lat+"&lon="+lon;

  $.ajax({
    type : "POST",
    dataType : "jsonp",
    url : weatherAPI+"&units=metric&callback=?",
    async : true,
    success : function(data) {
      weather = data.weather[0].main;
      dataLayer.push({"weather": weather});
    },
    error : function(errorData) {
      console.log("Error while getting weather data :: "+errorData.status);
    },
    complete : function() {
      dataLayer.push({"event": "weatherDone"});
    }
  });
</script>

4. Add rule to fire tag on every page ({{url}} matches RegEx .*)

Here’s what’s going on.

First, a couple of external JavaScript functions are called to retrieve the longitude and latitude of the visitor by using their IP addresses. I’m using the free geoPlugin service. You can load it on your site by adding <script type=”text/javascript” src=”http://www.geoplugin.net/javascript.gp” type=”text/javascript”></script> in your template.

Remember to load this script BEFORE the weather API runs. It’s best to put it in the <head/> of your page template. If you want, you can also put the script load as the first line of the custom HTML tag you just created.

Next, I use the API of OpenWeatherMap to retrieve the weather data for the latitude and longitude I got in the previous step. Matt Aster modified my solution so that it works with the Weather Underground API.

In the AJAX call, I make an asynchronous call to the API, requesting the data in JSONP (since it originates from a different domain than mine). If the call is successful, I look for the /weather/main/ node, as it has a nice, short description of the weather in the area (e.g. “Clear”). I then push the string into the data layer.

Finally, whether the API call is a success or not, I push an event “weatherDone” into the data layer. This is used to make sure the API call is done before the Universal Analytics tag is fired (see below).

Create new custom dimension in GA

1. Go to the admin panel of your Google Analytics site
2. Under Property, choose Custom Definitions / Custom Dimensions
Create new Custom Dimension in Google Analytics
3. Create a new Custom Dimension with the name “Weather”
4. Scope the new dimension to Session
5. Set the dimension as Active
6. Click Save
7. Make note of the index of the new dimension

Here you create a new dimension in Google Analytics and set it active. You need to make note of the dimension index, since you will be referring to this in a short while.

Create new macro in GTM

1. In Google Tag Manager, go to your container and click New Macro
Create new macro in Google Tag Manager
2. Name the macro “Weather”
3. Set Macro Type as Data Layer Variable
4. Type “weather” in Data Layer Variable Name
5. Click Save

You create the macro to access the weather string you pushed into the data layer a couple of steps ago.

Edit your GA tag

1. Go to the tag that tracks your pageviews and sends them to GA
2. Choose More Settings
3. Choose Custom Dimensions
4. Add the index number of your new dimension in the Index field
5. In the Dimension field, click {{+macro}} and choose the macro you just created
Send Custom Dimension with the pageview
6. Edit the firing rule and add condition {{event}} equals weatherDone
Wait for weather script to run
7. Save the tag
8. Create a new container version
9. Publish the new container version

Here you send a new custom dimension with the pageview, and it gets its content from the data layer variable you pushed into the data layer during the weather API call. Since the calls are asynchronous, you’ll need to make sure the UA tag is fired only after the weather API call has been made. This is done by waiting for the event weatherDone to be pushed into the data layer.

Make sure everything works

1. Visit your site
2. Take a look at the requests your site sends by using Firebug or something similar
Use Firebug to debug your scripts

Enjoy

I created a new custom report in GA, with visits, pageviews and conversion rate as metrics, and my new custom dimension as the dimension.

Note that it might take some time for the new dimension to start pulling in data. If Firebug tells you that the weather data is sent along with your pageview data, you’re fine.

This could be done in so many different ways, but I chose JavaScript simply for this quick prototype. I’m pretty pleased with the result, and even though I make a couple of external calls, page load speed is not an issue. There’s always a risk with asynchronous scripting that the user is quick enough to interact with the site before the pageview is sent, but I don’t think that will be an issue with this light-weight scripting.

I can think of a number of cool applications for this weather API, but I’ll leave those to your imagination.

Google Tag Manager and Universal Analytics do a terrific job of providing high value for marketing professionals. I love the fact that you don’t need to mess with the page template, and you can test and preview your tags as much as you want before publishing them.

EDIT: I edited the firing rules so that the UA tag occurs only after the weather API call has completed.

EDIT II: Note that you need to load jQuery for this to work! The $.ajax call is a jQuery function! So either load the jQuery resource in the <head/> of your page method (so that it gets loaded before the GTM container) OR have the following as the first line of the custom HTML tag:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

EDIT III: Be sure to check my post on how to make sure the weather API is polled just once per visit. This will improve site performance, and decrease the burden on the external API.

EDIT IV: Finally, see this post on sending custom dimensions with events rather than pageviews for the optimal version of the code above.

Share Share on Google+333Tweet about this on Twitter194Share on LinkedIn24Share on Facebook42

Comments

  1. Craig says

    Hi

    I work in retail and there is a big difference for a clear day being 30C and 10C. Does this method allow you to segment by temperature?

    Thanks
    Craig

    • says

      Hi Craig,

      Not very well. You can add temperature data as a custom metric (the API provides temperature as well), but Google Analytics doesn’t support calculated metrics at the moment. So you’d see temperatures as sums rather than averages, for example.

      The best way would be to round the temperature to the nearest 5 degrees, for example, in the script itself. Then you’d send the data as custom dimensions like “Cloudy – 5C” or something.

      It’s a bit counter-intuitive, since temperature is a numeral value and thus better suited as a metric, but without the possibility to calculate metrics (yet), you have to compromise.

  2. says

    Hi Simo,

    i saw your prez at superweek it was great! Congratulations! My question is: i have a customer who is a large ice cream shop. I thought that it would be great to connect these data with adwords. For example: if wheather is over 30 celsius then adwords would raise my bids automatically by 30%. Is that possible to create it? How would you do this? Thanks,M.

    • says

      Hi Sebestyén,

      Thanks for your comment! Superweek was amazing.

      I’m sorry but I don’t really know that much about rule-based bid management in AdWords. Would be a good idea though. My script measures the weather at the visitor’s location. To measure a static location (such as the city where the ice cream store is located), you’d just hard-code the longitude and latitude of said location into the API call.

      • says

        Simo, one more thing — I was getting errors with the weather API call and found a small typo in your code:

        Instead of “http://api.openweather.org” should be “http://api.openweatherMAP.org” (word MAP missing in the domain name :-).

        Now it works, being called once per session. All with GTM, no source code change required by our tech team, I love this :)

      • says

        Hi Petr,

        Thanks! I can’t believe I’ve had the wrong API end point all this time :D

        I’m going to make some modifications to my post on using a session cookie, since you can skip the whole cookie validation part in code with an aptly placed GTM macro!

        Simo

      • says

        Cool, looking forward to this. I have already combined your three posts together and am sending weather info together with ClientID and some other information with events ONCE per session (based on your article about the cookie – validation).

        Thanks for all the helpful stuff! :)

      • says

        One more thing — I have just found out geo-location is not working with HTTPs. Any suggestions?

  3. says

    Should this work on query 1.7.2? I’m getting this error.

    [Error] ReferenceError: Can’t find variable: geoplugin_latitude
    global code (www.anythinggreen.com, line 1)
    insertBefore
    (anonymous function) (gtm.js, line 30)
    Rb (gtm.js, line 31)
    ma (gtm.js, line 10)
    (anonymous function) (gtm.js, line 49)
    La (gtm.js, line 51)
    Ta (gtm.js, line 15)
    push (gtm.js, line 52)
    (anonymous function) (gtm.js, line 52)
    ya (gtm.js, line 12)
    (anonymous function) (gtm.js, line 53)

    • says

      Hi,

      Seems like you didn’t load the geoplugin resource (it’s there in the guide). You’ll need to load

      <script type=”text/javascript” src=”http://www.geoplugin.net/javascript.gp” type=”text/javascript”></script>

      before the Custom HTML runs, so either add it to your page template in the element, or as the first line of the Custom HTML tag.

Trackbacks

Leave a Reply

Your email address will not be published. Required fields are marked *