Tatcounter On Googlepages

Tatcounter On Googlepages

StatCounter is one of the best and most popular tools for tracking website usage statistics. Even the free service, which is limited to 100 log entries, can be very useful and informative for a webmaster, and is actually quite sufficient for a non-commercial website.

The original version of Google Page Creator did not allow JavaScript in GooglePages. StatCounter provides an "HTML only" option, but in that case most of the in-depth tracking information (such as referring URLs and search engine queries) is not collected.

In a welcome development, the current version of GPC allows to add the JS version of the StatCounter tracking code to GooglePages.

Generating "Invisible" StatCounter Code

Adding the invisible counter version of StatCounter code is currently the easiest option for GooglePages, because it is not subject to the GPC JS execution bug. Instructions for installing the visible version of StatCounter are provided in the following section.

The "invisible counter" parameter is set in StatCounter either when a new Project is created, or through the "Install Code" menu for an existing Project.

The procedure to create a new StatCounter Project or modify an existing one to obtain the invisible counter code is summarized below.

read the Known JS Bugs page for warnings and caveats about adding JS code to GooglePages

log in or create a StatCounter account

select "Add New Projects" option on the "My Projects" screen

select "Standard StatCounter Project"

enter title and URL for the GooglePages website

[instructions start here for an existing Project]

configure and Install Code

select "Invisible Counter" option

select "No Frames", leave optional check boxes blank

select "Default Install Guide"

the generated StatCounter code should be similar to the following (note the "invisible=1" parameter)

<!-- Start of StatCounter Code -->

<script type="text/javascript" language="javascript">

var sc_project=1691030;

var sc_invisible=1;

var sc_partition=16;

var sc_security="262f73fa";

</script>

<script type="text/javascript" language="javascript" src="http://www.statcounter.com/counter/counter.js">

</script><noscript>

<a href="http://www.statcounter.com/" target="_blank">

<img src="http://c17.statcounter.com/counter.php

?sc_project=XX&invisible=1" alt="free web page counters" border="0"></a> </noscript>

<!-- End of StatCounter Code -->

Adding StatCounter Code to a GooglePage

To add the above code to a GooglePage using GPC:

read about known JS bugs, especially before applying the StatCounter code to the default "home" page

open an existing or create a new GooglePage

select an editable field (e.g., page footer)

enter "Edit HTML" mode

add the StatCounter script at the end of the existing HTML code

add <DIV> and </DIV> wrappers around the StatCounter script

"Save Changes" and "Publish" the page

the GooglePage is now ready for tracking by StatCounter

NOTE: If the field becomes uneditable after the StatCounter script has been added to it, consult the description of the uneditable field bug for the detailed information and several work-around options.

Visible StatCounter GooglePages

As any other JS object, the StatCounter code is subject to the uneditable field bug. But because it generates text or graphic output, the visible version of StatCounter is also affected by the GPC JS execution bug. Both these JS bugs are described in detail on the Known JS Bugs page, but essentially the GPC JS execution bug means that multiple copies of the JS code text or graphical output can be added by GPC to the HTML source code for the page.

The simplest procedure that guarantees that both of the JS bugs will be safely avoided is as follows:

prepare the HTML code for all the GooglePage fields (title, subtitle, main, sidebar(s), and footer) in an external editor

create a new empty GooglePage in GPC

using the HTML Editor window, paste the prepared HTML code into the selected field (do not use the WYSIWYG interface to edit any fields with JS code or custom formatting options)

note that the visible StatCounter will not be actually displayed in the WYSIWYG window—that is normal, in fact desirable, see GPC JS execution bug description for details

"Publish" the GooglePage, but don't go "Back to Page Manager"

use the "View Live" link to look at the published page (using the "Preview" option is not recommended, as it can cause the GPC JS execution bug)

if any changes need to be made, make them in the external text editor and paste the revised HTML code into the appropriate fields using the HTML Editor window (again, do not use the WYSIWYG interface to edit these fields, as it will likely corrupt the JS code)

"Publish" the page and use the "View Live" link to examine it again

repeat the last two steps until the published page looks as desired

save and backup the final version of the HTML code for each field in the external text editor (these will come in handy for changing the page later, so use remote backup if necessary)

use "Back to Page Manager" when finished

the GooglePage with JS code has been created!

if at a later point the page needs to be edited, e.g., StatCounter needs to be moved to a different field, delete the existing page and re-create it from scratch as described above (using the backup/revised HTML code)—do not open a GooglePage with visible StatCounter code for editing in GPC—the visible StatCounter JS code may become corrupted if a page is opened for editing

More information: JavaScript tutorial and Known JS Bugs.

NOTE: A helpful example, provided by Christina during the discussion of this feature on the StatCounter user forum, clearly demonstrated that StatCounter can be added in both Firefox and IE versions of GPC. Follow-up testing indicates that the originally reported problem with the visible counter in IE was actually an example of the more general empty field bug in the IE version of GPC—JS is removed by GPC in IE if the field has no other non-JS content.

Text or Image Visible StatCounter?

Testing indicates that the image version of the visible StatCounter code works more consistently than the text one. For example, see the StatCounter images underneath the navigation menu in the sidebar.

It is not impossible to add a working text StatCounter, but it is more difficult to prevent it from being corrupted on all but the simplest pages. In either case, it is also recommended to choose the "disable link back to StatCounter" option during Project setup. StatCounter offers a wide variety of styles and formatting options for its visible counters, which are described in detail in the StatCounter help files.