Cross Domain Tracking – Two Domains, Same Content

Here is a helpful guide to setting up cross domain tracking across two domains using Universal Google Analytics.

Helpful Resources

Scenerio – You manage two domains, same content

  1. You have a single Universal Google Analytics account for both domains
  2. You have two domains, but they are essentially the same experience.  For example, www.mywebsite.com and shop.myshoppingsite.me.
  3. You have included the UA code in the global header for both domains.

Step 1 – Modify existing UA code on both domains

Add the bold components to your UA code as indicated, modifying the domain name to reflect the additional domain.  In the first domain UA tracking code the sub-domain “m” is being wild-carded by using “.”  In the second domain UA tracking code there is no sub-domain so there is no need to include “www.” as this is assumed.  How this tracking code works is beyond my expertise, but the goal is that we will be able to visually see both domain URLs in our analytics reporting after we set up a filter view in step 2.

  • Domain #1 (www.mywebsite.com)
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXXXX-XX', 'auto', {'allowLinker': true});
ga('require', 'linker');
ga('linker:autoLink', [‘.mymobilesite.mobile’] );
  ga('send', 'pageview');
</script>
  • Domain #2 (m.mymobilesite.mobile)
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXXXX-XX', 'auto', {'allowLinker': true});
ga('require', 'linker');
ga('linker:autoLink', [‘mywebsite.com’] );
  ga('send', 'pageview');
</script>

Step 2 – How to show the domain part of a URL in Google Analytics

I do not take credit for this step which has been copied with slight modifications from the above mentioned post on Splitter: See Article.

By default Google Analytics only show the path part of a URL (e.g. “/promotion” or “/”). Being able to see the full URL including the domain name (e.g. “mywebsite.com/promotion” or “m.mymobilesite.mobile/”) can be very helpfully.

To show the full URL in Google Analytics you have to setup an advanced filter. Log in to Google Analytics with “Administrator” rights:

  1. Go to “Admin”.
  2. Click the View you wish to modify.
  3. Click the “Filters” tab.
  4. Click the “+ New Filter” button.

In the Add Filter to View form:

  1. Write a Filter Name (“Show domain”).
  2. Under Filter Type select Custom.
  3. Select Advanced below.
  4. Now fill in the form as shown below, refer to image for current visual reference:
  • Field A -> Extract A select Hostname and write “(.*)”.
  • Field B -> Extract B select Request URI and write “(.*)”
  • Output To -> Constructor select Request URI and write “$A1$B1″.
  • Tick Field A Required and Override Output Field

filter-view

Now the domains will appear in your reporting.

Implementing CSS3 Animation using SASS and jQuery

This article shows how to utilize CSS3 animation techniques using SASS and a simple amount of jQuery to add a level of refinement to any UI project.  By using SASS @mixins and creating reusable class names, you can implement CSS3 animations on any element in your design.  As always, by mindful of browser support and include the necessary back fills.

The Goal – CSS3 Animation

Create a fade-in effect that gradually displays three columns of text, one after the other once the page loads (see image below).  Check out demo →

CSS3 Animation Example

 

Continue reading