Upcoming LunaMetrics Seminars
Washington DC, Dec 1-5 Los Angeles - Anaheim, Dec 8-12 Pittsburgh, Jan 12-16 Boston, Jan 12-16

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

http://www.lunametrics.com/blog/2008/04/03/are-your-top-content-urls-too-long/

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

haiming says:

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

Jeff says:

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

Rebecca says:

Yea! It works, this is sooooo nice!

Aizkorri says:

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

John says:

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%.

Aizkorri says:

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

John says:

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%;
}

Levi C says:

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

More power.

John says:

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;
}

}

John says:

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;
}

}