Are your Top Content URLs Too Long?

By /

April 3, 2008

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 SettingsHensonApplication DataMozillaFirefoxProfiles722qaf8f.defaultchromeuserContent.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

John is a former LunaMetrician and contributor to our blog.

  • http://webhostingreviews4u.com/ haiming

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

  • http://americanwinery.com Jeff

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

  • http://www.windrainsky.com Rebecca

    Yea! It works, this is sooooo nice!

  • Aizkorri

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

  • http://www.lunametrics.com John

    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

    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

  • http://www.lunametrics.com John

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

  • http://cebudvr.blogspot.com Levi C

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

    More power.

  • http://www.lunametrics.com John

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

    }

  • http://www.lunametrics.com John

    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;
    }
    
    }
    
Contact Us.

LunaMetrics

24 S. 18th Street, Suite 100,
Pittsburgh, PA 15203

Follow Us

1.877.220.LUNA

1.412.381.5500

getinfo@lunametrics.com

Questions?
We'll get back to you
in ONE business day.