Home
Conversion Rate
E-Marketing
About Us
Blog
Blog
412.343.3692
1.800.975.1844
« Slash Pay-Per-Click Costs Using Negative Keywords
Google Analytics: Worst Titles Ever »

Are your Top Content URLs Too Long?

Google Analytics’ reporting interface often can’t display the entire URL for a pageview in the Top Content report.

Most browsers support the ability to override a web page’s CSS with a custom .css file. Here is how to use that feature in Firefox to let you see the full URL string.

(If you use IE, Opera, Safari, etc, just show this article to your favorite geek, and if you’ve been nice to them, they might help you out.)

The key is the userContent.css file. CSS placed in this file can override a page’s default CSS. This file resides in your /chrome directory. On my Windows XP computer, it is:

C:\Documents and Settings\Henson\Application Data\Mozilla\Firefox\Profiles\722qaf8f.default\chrome\userContent.css

If the file does not already exist, just create it in a text editor.

Add the following CSS to the userContent.css file to alter the display behavior in the GA reporting interface.


@-moz-document url-prefix(https://www.google.com/analytics/reporting/top_content)
{
.records td {
padding: .4em !important;
padding-bottom: 2.0em !important;
vertical-align: top !important;
}
.text_wrapper {
white-space: normal !important;
}
.text_wrapper .text_wrapper {
white-space: normal !important;
overflow: visible !important;
}
a { white-space: nowrap !important; }
}

And what do you get for your effort?

Top Content - Google Analytics

But John, that’s so much work!

If you don’t like working with userContent.css, try the Firefox extension Stylish:
https://addons.mozilla.org/en-US/firefox/addon/2108
Install. Select Write Style > Blank Style (from the status bar icon) and Paste in the above CSS.

Bonus: Per-site user stylesheet rules:
http://lists.w3.org/Archives/Public/www-style/2004Aug/0135.html

Happy Reporting,

John Henson

Share and Enjoy:
  • Digg
  • del.icio.us
  • StumbleUpon
  • Sphinn
  • Facebook

This entry was posted on Thursday, April 3rd, 2008 at 7:27 pm and is filed under Google Analytics. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

10 Responses to “Are your Top Content URLs Too Long?”

  1. haiming Says:
    April 3rd, 2008 at 9:20 pm

    Wow,cool,Thanks for the great tip.I am using Firefox and I can use this tip.
    Thanks :-)

  2. Jeff Says:
    April 4th, 2008 at 10:53 am

    This is awesome, been wondering if there was a way to fix that but never took the time to try.

  3. Rebecca Says:
    April 10th, 2008 at 6:57 pm

    Yea! It works, this is sooooo nice!

  4. Aizkorri Says:
    April 25th, 2008 at 5:24 am

    very useful,
    anyways, I’ve been also trying to make the column as wide as the text, but no success,
    any ideas?

  5. John Says:
    April 25th, 2008 at 9:06 am
    Aizkorri,

    Try working with this piece of css:

    .records th.text {
    text-align:left;
    width:35%;
    }

    in the file: 1400089358-ga.css (line 2712)

    Try changing the 35% to 70%.

  6. Aizkorri Says:
    April 25th, 2008 at 9:46 am

    thank you,
    but I still have problems :),

    I’ve been checking but I cannot find that css file or any similar,
    should it be in the same directory as userContent.css? or somewhere with the temporary files?

    I’ve also tried adding it to userContent.css with no results. (just in case…)

    so, could you please tell me where can I find that file?

    thanks in advance

  7. John Says:
    April 25th, 2008 at 10:00 am
    That is the file on google’s server that is used when you view their site. It isn’t a local file.

    Basically, just add the following where ever you put the other css in the post and it will double the length of the URL column at the expense of the other columns.

    .records th.text {
    text-align:left;
    width:70%;
    }

  8. Levi C Says:
    May 16th, 2008 at 5:12 pm

    thanks for this kind of information.
    I really helps me lessen the length of the URL’s.

    More power.

  9. John Says:
    July 8th, 2008 at 10:01 am
    I noticed that this was no longer working for me correctly in FF3. FF3 did not drop the content URL to the lower line so that it was under the data line like in the image. I modified the CSS to achieve a similar effect. If you are having problems, try the following instead:

    @namespace url(http://www.w3.org/1999/xhtml);
    @-moz-document url-prefix(https://www.google.com/analytics/reporting/top_content)
    {
    .records td {
    padding: .4em !important;
    padding-bottom: 2.0em !important;
    vertical-align: top !important;
    }

    .text_wrapper {
    white-space: normal !important;
    }

    .text_wrapper .text_wrapper {
    white-space: normal !important;
    overflow: visible !important;
    }

    .text_wrapper a {
    position: relative; top: 1.2em !important;
    white-space: nowrap !important;
    }

    }

  10. John Says:
    August 7th, 2008 at 9:38 am
    Another Update to the CSS. I think Google may have changed their CSS slightly causing the URL to overlap into the cell below it when using this custom CSS. Here is a modified version that looks a little better:

    @namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url-prefix(https://www.google.com/analytics/reporting/top_content)
{
.records td {
  padding: .2em !important;
  padding-top: .1em !important;
  padding-bottom: 1.9em !important;
  vertical-align: top !important;
}

.text_wrapper {
  white-space: normal !important;
}

 .text_wrapper .text_wrapper {
  white-space: normal !important;
  overflow: visible !important;
}

.text_wrapper a  {
  position: relative; top: 0.4em !important;
  white-space: nowrap !important;
}

}

Leave a Reply