Using Jirafe with MageBridge

The Jirafe extension adds page tracking to the Magento frontend, and adds graphs in the Magento backend to interpret these statistics. Jirafe can easily be integrated within Magento, but adds a bit more work when you want to integrate it into Joomla! using MageBridge. This tutorial explains you which steps to take.

How Jirafe works

The Jirafe extension adds JavaScript-code to the Magento frontend and through this JavaScript-code tracker-data are collected and sent to the central Jirafe server. Data from this central server is then transferred into the Magento backend again. Jirafe therefor functions in the same way as Google Analytics, and is actually a Piwik-based hosted solution.

jirafe

Investigating the XML-layout code

The Magento extension for Jirafe adds a XML-layout file app/design/frontend/base/default/layout/foomanjirafe.xml which defines two blocks on all Magento pages:

<default>
    <reference name="head">
        <block type="foomanjirafe/js" name="foomanjirafe_js" as="foomanjirafe_js" >
            <action method="setIsCheckoutSuccess"><value>0</value></action>
        </block>
    </reference>
    <reference name="before_body_end">
        <block type="foomanjirafe/jsAlt" name="foomanjirafe_js_alt" as="foomanjirafe_js_alt" />
    </reference>
</default>

As you can see, the first block is added to the HTML <head> section, while the second block adds a non-JavaScript based tracker to the bottom of each page </body> (which is actually an invisible image). The two block-names are:

foomanjirafe_js
foomanjirafe_js_alt

Integrating Jirafe with MageBridge

To integrate Jirafe with MageBridge, we need to transform these two Magento blocks into Joomla! modules. Within Joomla!, modules are always assigned to template positions, so therefor we need to create two module-positions within the Joomla! template. Open up the index.php file of your template, and add a new jdoc-tag just below or above the standard <jdoc type="head" /> statement. Just make sure that the new jdoc-tag is located within the <head>-section of your HTML-document.

<head>
<jdoc:include type="head" />
<jdoc:include type="modules" name="head" style="raw" />
</head>

Do the same thing for the bottom of the page:

<jdoc:include type="modules" name="before_body_end" style="raw" />
</body>

If you are using a Joomla! template that does not use jdoc-tags in the index.php file, ask your designer to add these module-positions for you, or consult the documentation of the template builder. For instance, RocketTheme templates do not use jdoc-tags like this, but use their own Gantry framework to assign modules to the page.

Instead of creating a new module-position, you might also want to look for existing module-positions. Many Joomla! templates for instance already contain a debug-position at the bottom of the page, which can be used instead of before_body_end.

Creating the MageBridge Custom Block for regular visitors

Now that a module-position has been created, assign a new Joomla! module MageBridge Custom Block. The following settings are made for this module:

Title: Jirafe JavaScript-header
Show title: No
Position: head
Custom block: foomanjirafe_js
Load CSS: No
Load JavaScript: No
Module layout: Raw

Creating the MageBridge Custom Block for non-JavaScript visitors

Next, add another Joomla! module MageBridge Custom Block, with the following settings:

Title: Jirafe non-JavaScript image
Show title: No
Position: before_body_end
Custom block: foomanjirafe_js_alt
Load CSS: No
Load JavaScript: No
Module layout: Raw

This should add the Jirafe blocks to the Joomla! pages.

Created on Thursday, 26 May 2011
Modified on Thursday, 26 May 2011

Use MageBridge with Advanced Module Manager - Yireo