Adding custom Magento scripts to the Joomla! page

With Magento, there are hundreds of extensions available that add something to the Magento pages. Our MageBridge extension is able to bridge all of this functionality to Joomla!, but this requires a bit of knowledge of Magento theming. Here's an explanation of how to add custom Magento JavaScript to the Joomla! page - a procedure that can be used for integrating tools like GetClicky, Google Analytics and Woopra.

Adding Google Analytics code to your Magento shop

google-analytics-dashboard1If you want to add Google Analytics to your site, this means you need to add a piece of JavaScript to the resulting HTML-source which is then picked up by the browser. Adding such a piece of JavaScript is possible by cutting and pasting the code directly in your theme (either the Joomla! template or the Magento theme).

But Google Analytics becomes really useful once you add specific checks to the mechanism: For instance, within Magento you want to see how many people make it to the shopping cart when specific products are being ordered. Luckily, Magento offers this functionality out of the box. The only thing you need to do is configure things through the backend (System > Configuration > Sales > Google API > Google Analytics) and configure your settings within your Google Analytics account.

How does the Magento module for Google Analytics work?

The next question would be how to add the Google Analytics script not only to Magento pages, but also to Joomla! pages using MageBridge. The answer is: Through theming. Within Magento, modules (extensions) can be used to define blocks that deliver output. These blocks are defined within XML-code and eventually (when the webpage is loaded) translated into HTML/CSS/JavaScript.

This XML-code is defined within a layout-directory. The default layout-directory (for the default Magento theme) is located in the folder app/design/frontend/base/default/layout/ and contains a lot of different XML-files. The file googleanalytics.xml belongs to the Google Analytics module and defines a certain block:

<reference name="after_body_start">
    <block type="googleanalytics/ga" name="google_analytics" as="google_analytics" />


Adding the block to MageBridge

Within Joomla! you can use the MageBridge Custom Block module to add the block google_analytics to your Joomla! page: You can choose to hide the module title and place the module on a position somewhere in the top of the page. But the XML-code within Magento shows a different strategy: The block google_analytics is not added directly to the page, but it's added to the block after_body_start instead.



after_body_start and before_body_end

Within the XML-file page.xml this block after_body_start is defined together with another block called before_body_end. When the webpage is turned into HTML-code, these two blocks are placed in the beginning and end of the HTML-body. There for they are popular with other Magento modules as well. For instance, GetClicky and Woopra modules add themselves to the bottom of the page through the block before_body_end.

One strategy would be to add each Magento block manually to your Joomla! site (like shown above with the block google_analytics), but this would require you to do a lot of research to find out the right block-names. Instead you could just add the blocks after_body_start and before_body_end to the Joomla! page and be done with it.

What should you do in Joomla!?

Open up the index.php file of your Joomla! template and add two new module-positions (mage_after_body_start and mage_before_body_end) to the HTML-code. The end result should look a bit like this:

<jdoc:include type="modules" name="mage_after_body_start" style="none" />
<jdoc:include type="modules" name="mage_before_body_end" style="none" />

After you have added these two module-positions to the Joomla! template, you can assign modules to this position. Go to the Joomla! Module Manager and add a new module-instance of the type MageBridge Custom Block. On the left, manually enter the position mage_after_body_start and hide the module-title. On the right, make sure the block After Body Start is selected.


That's it. Now every Magento extension that adds JavaScript to the Magento page, can be reused easily within Joomla! without extra modifications.

Using both the Joomla! technique as the Magento technique

But sometimes you might want to use both methods: The Joomla! solution might be better when tracking search-results, or when dealing with Joomla! blogs. But the Magento alternative might be better when dealing with the Magento checkout or Magento products. Ideally you may want to use whatever is best.

Fortunately, with a little bit of PHP-code you can combine both methods within your Joomla! site. The trick is to load one module-position for all MageBridge pages, and another module-position for all non-MageBridge pages. This way you can publish a Joomla! Google Analytics module for instance, as well as use the Magento block - while preventing that both extensions are loaded simultaneously on the same page.

The following code loads a module-position mage_after_body_start on MageBridge pages, but a module-position after_body_start on all non-MageBridge pages:

<jdoc:include type="modules" name="mage_after_body_start" style="none" />

<jdoc:include type="modules" name="after_body_start" style="none" />
<?php } ?>

Note that we did not use the MageBridgeTemplateHelper-class, while that class has an isLoaded() method that checks whether MageBridge is loaded. By using that method, the Magento-specific module-position would also be loaded, when a MageBridge module is displayed or when the MageBridge Content Plugin is used. That's unwanted behaviour.