Friday, September 9, 2011

Tracking Submit Button Within A Joomla! Form

Tracking events and pageviews in Google Analytics is a great feature that allows you to identify when visitors are performing an action. The _trackEvent() function specifically is a very versatile piece of code that can be applied to elements where a pageview is not generated such when a visitor plays a video, listens to a sound bite, or clicks a submit button.

Installing the code can differ from scenario to scenario. For instance placement of the JavaScript tracking code is different when placing it on a link as opposed to placing it on a submit button. The following example outlines how to install the _trackEvent() function on a generic contact form that is normally installed from within the Joomla! interface.

Joomla! is a great content management system that allows users to build and manage a website with almost no programming knowledge. For programmers though, it can make you feel like a fish out of water. When a form is installed on a website from within Joomla!, it is commonly done with the Blue Flame Forms feature found under the components tab. Elements of the form such as text boxes, drop down menus, text areas and buttons can easily be added and rearranged. When it comes to installing code to track a button click this feature is of no help.

To install the _trackEvent() function on a Joomla! form, you must have access to the files of your Joomla! website through an FTP program. In this example I used Filezilla.

The document you must install the code on is named default.php and is located at the end of the path joomla\components\com_contact\views\contact\tmpl. The components folder may be within a couple other folders first but with only a little digging it is not too difficult to find.





Drag default.php over to your computer or some other location where you can open it. Using HTML editing software (I used Microsoft Visual Web Developer 2008) open the file. You will need to find the line of code pictured below. It should be on line 20 of the code or somewhere around there.



    <form action="<?php echo JRoute::_('index.php') ?>" method="post" name="selectForm" id="selectForm">
    <?php echo JText::_( 'Select Contact' ); ?>:
    <br />
    <?php echo JHTML::_('select.genericlist', $this->contacts, 'contact_id', 'class="inputbox"
    onchange="this.form.submit()"', 'id', 'name', $this->contact->id);?>
    <input type="hidden" name="option" value="com_contact" />
    </form>



Once you have located the code snippet, insert your _trackEvent() function. This data model is very versatile because you can assign different values that map directly into Google Analytics event tracking reports. For Google’s example of the code click here. For this scenario I only filled out the required fields which are “categories” and “action”. The code snippet looks like this.


onSubmit="_gaq.push(['_trackEvent', 'contact-form','submit']);"



Once installed in default.php, the new snippet within the document should look like this.



    <form action="<?php echo JRoute::_('index.php') ?>" method="post" name="selectForm" id="selectForm"
    onsubmit="_gaq.push(['_trackEvent', 'contact-form','submit']);">
    <?php echo JText::_( 'Select Contact' ); ?>:
    <br />
    <?php echo JHTML::_('select.genericlist', $this->contacts, 'contact_id', 'class="inputbox"
    onchange="this.form.submit()"', 'id', 'name', $this->contact->id);?>
    <input type="hidden" name="option" value="com_contact" />
    </form>


Once it is installed, save your document and upload it to your server through the FTP program. Do some testing to see if your code is working. It is incredibly easy to leave out a seemingly minimal piece of information such as a quotation mark or an angle bracket which will cause the code to not work.

No comments:

Post a Comment

3 Attorney Blogs That Are Crushing the Content Game

I always recommend to lawyers that they should have a blog on their site. There are several fundamental reasons that blogs are a good idea f...