Magento integration module

The instructions on this page are intended for self service and online accounts.
Enterprise customers should contact their account managers for integration support.

The Magento integration module will allow ClickTale to properly record your customers. The module caches complete versions of each and every pageview as it is delivered to the customer. No matter what version of your site visitors see, ClickTale Visitor Playbacks will show you the exact content as seen and interacted with by your visitors.

The module is PHP5 code, provided with full sources, that allows better integration of a Magento eCommerce PHP site with ClickTale by enabling accurate caching of the HTML that is sent to the visitor in ClickTale recorded pageviews. Be sure that your host supports both these, as well as the system requirements of Magento.

License

The module is subject to a permissive license for ClickTale users. Please see license.txt in the archive for more information.

Installation Guide

***Please note: Prior to installing the module please remove the existing tracking code you have on your pages and make sure all other integration methods are disabled***

1. Download the module here.
2. Unzip the package to your Magento installation directory (sub-directories named app and lib should already be present there). (Once unzipped you should have a directory named lib/ClickTale/... )
3. Make sure to create lib/ClickTale/Logs and lib/ClickTale/Cache directories (if they do not already exist) and make sure they have writing permission (CHMOD 777)
4. Generate the ClickTale tracking code you want to use in your pages (or locate your already generated code).
5. Copy and paste that code (from previous step) into the appropriate parts in lib/ClickTale/ClickTaleScripts.xml file.
6. Add

   ClickTaleFetchFrom="%FetchFromUrl%";

   Just before the line

   if(typeof ClickTale=='function') ClickTale([your ClickTale parameters])

   Please note: you do not need to change "%FetchFromUrl%" to a specific URL. It will be replaced automatically during the rendering process, with a value dependent on the page being recorded.
   Your xml file should now look like this:

   <?xml version="1.0" encoding="utf-8" ?>
   <scripts>
     <script name="Top" DoNotReplaceCondition = "&lt;!-- ClickTale Top part --&gt;">
       <![CDATA[
   <!-- ClickTale Top part -->
   <script type="text/javascript">
   var WRInitTime=(new Date()).getTime();
   </script>
   <!-- ClickTale end of Top part -->]]>
     </script>
     <script name="Bottom" DoNotReplaceCondition="&lt;!-- No ClickTale --&gt;" InsertBefore="&lt;!-- ClickTale Bottom part Here --&gt;|&lt;/body&gt;">
       <![CDATA[<!-- ClickTale Bottom part -->
   <div id="ClickTaleDiv" style="display: none;"></div>
   <script type="text/javascript">
   if(document.location.protocol!='https:')
     document.write(unescape("%3Cscript src='http://s.clicktale.net/WRb.js' type='text/javascript'%3E%3C/script%3E"));
   </script>
   <script type="text/javascript">
   ClickTaleFetchFrom="%FetchFromUrl%";
   if(typeof ClickTale=='function') ClickTale([Your ClickTale parameters]);
   </script>
   <!-- ClickTale end of Bottom part -->]]>
     </script>
   </scripts>

   IMPORTANT NOTE! This is how the code looks like in a text editor. In a browser, "&lt;" will be converted to "<" and "&gt;" will become ">"

   IMPORTANT NOTE! This code sample relates to http tracking code only. For tracking code which can record both http and https pages you should first make sure your plan offers the ability to record https pages (check if the option is available in the tracking code generation page), then generate SSL/https compliant code and use it in step 5 instead, see below for an example

<?xml version="1.0" encoding="utf-8" ?>
<scripts>
  <script name="Top" DoNotReplaceCondition = "&lt;!-- ClickTale Top part --&gt;">
    <![CDATA[
<!-- ClickTale Top part -->
<script type="text/javascript">
var WRInitTime=(new Date()).getTime();
</script>
<!-- ClickTale end of Top part -->]]>
  </script>
  <script name="Bottom" DoNotReplaceCondition="&lt;!-- No ClickTale --&gt;" InsertBefore="&lt;!-- ClickTale Bottom part Here --&gt;|&lt;/body&gt;">
    <![CDATA[<!-- ClickTale Bottom part -->
<div id="ClickTaleDiv" style="display: none;"></div>
<script type='text/javascript'>
document.write(unescape("%3Cscript%20src='"+
 (document.location.protocol=='https:'?
  'https://clicktale.pantherssl.com/':
  'http://s.clicktale.net/')+
 "WRb.js'%20type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
ClickTaleFetchFrom="%FetchFromUrl%";
if(typeof ClickTale=='function') ClickTale([Your ClickTale parameters]);
</script>
<!-- ClickTale end of Bottom part -->]]>
  </script>
</scripts>





7. Make sure to "Save configuration" in the Magento admin panel to enable the ClickTale Integration Module.
   Go to: System--> Configuration --> Advanced --> Advanced (button) --> click "Save config"

Troubleshooting

Navigate to the page located at www.yourdomain.com/lib/ClickTale/Install/index.php, similar to the PHP Integration module, any items marked red should be corrected for trouble-free recording. Commonly the Cache and Logs folders should be manually given write permissions to the system using CHMOD.

Please note: Magento’s one-page checkout uses JavaScript panels which ClickTale does not support by default. Please visit Recording JavaScript to enable support for these panels.