An Easy to Follow Guide About Integrating a Third Party Script with Your Magento Theme

by Maria Mincey in Magento / Tutorials on 12 Feb 2015


1

Magento is a dynamic and feature-rich e-commerce platform, allowing millions of online players to enhance and control the functioning of their online store. For those who are a part of this retail space, can consider the platform as a secret weapon to keep their competitors on the back foot. The CMS platform is great in the way it offers a powerful catalog management system, SEO optimization, and sophisticated marketing tools to allow store owners gain a more competitive edge.

However, as the competition becoming fierce, online retailers have started realizing the possibilities online channels provide to boost their sales. For the e-commerce store owner, it’s an uphill battle to get the bottom of what works for their website and what’s absolutely not. For this they keep on integrating their website with various tools that help them spruce up the overall functionality and personality of their website.

As we know that Magento is a highly flexible platform, means it can be customized easily to suit the ongoing requirements of your business. The platform provides various ways to help you revamp the layout, design, as well as the performance of your store. Those who have set up their online channel on Magento can easily extend its operations by going beyond the default functions and embed third-party tools or scripts in its themes.

These third-party scripts are exceptionally reliable when it comes to strengthening the productivity of your store. For this purpose, store owners need to add third-party scripts in Magento stores. For those who are fully aware of the nuts and bolts of HTML and JavaScript, can easily make additions to enhance their store. Magento lets you add custom, third-party scripts to make the best use of your theme and make it more appealing and functioning.
In this tutorial, I am going to discuss about the ways through which third-party scripts can be added to your Magento theme. All the steps mentioned are easy to learn and will surely help you in revamping your overall Magento store in the most effective manner. These third-party services could be anything ranging from Google Analytics, Alexa, and codes snippets used to track data about the website. So, without further ado, let’s discuss about the guide in detail.

How To Add Third-party Scripts in Magento

While using third-party web applications and services, you’ll be provided with a code which should be added in the HTML file. However, while adding the code make sure it is placed either before the opening of thetag or after closing of thetag . We have two approaches to add this miscellaneous code. The easiest way to place HTML code is into your HTML templates, but more likely you’ll want to add it on either the HTML or area of your page. To know how to add the code, simply follow the below mentioned steps.

Understanding The Process of Adding Code To the HTML Header

  • First of all navigate to the admin menu, and select “System” and then “Configuration”.
  • Now, on the left side of your admin panel, choose the option “Design”. After this, you can click to expand the header section.
  • Once you are done with this, you will be getting a “Miscellaneous Scripts” text box. It’s the same box wherein you need to paste the code. Not to forget about reviewing the code to ensure whether it is placed accurately or not.
  • Now, save all the changes made by clicking on the “Save Config” button.
  • After completing the above mentioned steps, it’s time to examine the working of the script. For this it is recommended to clear your browser cache before going back to the store to check the script.

2

Understanding The Process of Adding Code To the HTML Footer

  • Here also, go to the Admin Area, and then select System> Configuration
  • Within the admin panel, again select “Design”, and then click to enlarge the “Footer” section.
  • Now, you are provided with a Miscellaneous Scripts text box, wherein you need to paste the code. Here, again it is recommended to make a formal assessment of your code to ensure whether it’s working fine or not.
  • Proceed to click on the “Save Config” button to save the changes made.
  • Once done with the above mentioned steps, you are required to evaluate the script to ensure its relevancy. Here also clear your browser cache and then go back to the store to test the script.

3

After completing the above mentioned steps, the embedded code will be appear in the Magento store.

What Script would look like:

You can enter any kind of script here e.g. any tracking code like Google or mouseflow. Once you save the conofiguration, it will start getting reflected within the header or footer of website. Once of the sample Google Analytics code is shared below:

<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>

and once saved, it should be appearing within your source code of your website (you can view by ctrl + u in browsers):

4

Let’s Wrap Up

And there we have it all, I hope find the tutorial useful in understanding the process of embedding third-party scripts to your Magento theme.

Written by Maria Mincey

Maria Mincey is software professional who is great at delivering focus in her writings. She meets expectations for Xicom Technologies, a software development company which delivers most comprehensive web applications and solutions for different industry verticals.

Maria Mincey has written 1 posts.