If you're into analyzing the traffic of your Joomla website (as you should be IMHO), you will probably need to add some tracking software to your site. The most obvious one is Google Analytics. Other choices can be Crazyegg, GoingUp or other solutions.
All of these, as well as other solutions, require that you add a Javascript snippet to your site. In this post I'll show you how to add some module positions to your template. This will make it easier to add the required scripts to your website.
Module position basics
If you've been working with Joomla, you know that a Joomla template consists of HTML and some PHP snippets.
For one, it contains a component area where the output from the different components are shown (articles, blog lists, third-party components etc). A Joomla template also contains several PHP snippets, which are called module positions. You can assign modules to these positions and they will appear in the given position in your template.
Easier way to insert scripts
Of course, you can use an extension for each third-party script you want to enter. Probably there is one available (isn't there for almost anything?). The problem with this approach, though, is that you need to keep track of X number of extensions and their updates. And for each extension you add to your site, the chance of being hacked increases. After all, code is made by humans, and humans make mistakes.
For those reasons, I prefer using the 'Custom HTML' module when I need to insert code snippets. For best results, you should have special module positions for the JavaScript snippet modules. That way, you can control where in the source code the snippets appear, something which can be crucial for the workings of the snippet.
The method is simple, but effective.
You will need three module positions, and as many Custom HTML modules as you need (one for each snippet).
Inserting the module positions in your template
In order to make this as flexible as possible, you need three module positions:
- endhead
- topbody
- endbody
Now you're ready to insert the module positions. You will need to enter the following code into your template index.php file. You'll find it here: /templates/yourtemplatename/index.php.
Make sure to create a backup of your index.php file before messing with it.
Enter this just before the </head> tag.
<jdoc:include type="modules" name="endhead" />
Enter this just after the <body> tag:
<jdoc:include type="modules" name="topbody" />
Enter this just before the </body> tag:
<jdoc:include type="modules" name="endbody" />
Save your template.
The next step is to add the actual modules that will hold your JavaScript. But before that, we need to do some adjustments to the text editor settings.
Allowing JavaScript in your editor
To be able to add the JavaScript to the Custom HTML module, you need to allow Javascript in your text editor. If you use TinyMCE, you find this setting in Extensions -> Plugin Manager -> Editor - TinyMCE 2.0. Make sure you have the setting for 'Code Cleanup on Startup' set to 'Off' and the 'Code Cleanup on Save' to 'Never'.
If you're using JCE, go to Groups -> Default (or other group you're using) -> Editor Parameters. Make sure the 'Allow Javascript' setting is set to 'Yes'.
Adding the script to the Custom HTML module
Now, you need to add the actual Javascript snippet to a Custom HTML module and assign it to the appropriate module position.
I'll use Google Analytics as an example. Go to the Module Manager and click New. Choose the 'Custom HTML' module type. You will see the module parameters.
Enter a title for the module, for instance 'Google Analytics code', enable the module, choose not to show the module title.
For the Google Analytics code, we assign the module to the newly created 'endhead' position. This has the Google Analytics snippet appear just before the closing HEAD tag (</head>). As you have not entered the new module positions to the template XML file, they will not appear in the module position drop-down. Not to worry: You can simply enter the position name 'endhead' in the field directly.
Lastly, enter the HTML mode of your editor and paste the Google Analytics code into the window. You can now save the module.
Reload your website frontend and look for the snippet.
Adding more snippets
Using this method, you can add as many Javascript snippets as you like. You can control the order of the snippets by altering the order of the modules in the module manager.
I find this method easy to use and flexible. Hope you enjoy it and that it saves you some time and frustration
, you will probably need to add some tracking software to your site. The most obvious one is Google Analytics. Other choices can be Crazyegg, GoingUp or other solutions.
All of these, as well as other solutions, require that you add a Javascript snippet to your site. In this post I'll show you how to add some module positions to your template. This will make it easier to add the required scripts to your website.
){kind=link}