How to place Google Analytics script in head instead of body in nopCommerce

Many search engine optimization (SEO) experts have different opinions about where to place Google Analytics script. Whether it should be in <head> or </body> section? If you search online, you will find several different opinions from different SEO experts / developers.

In nopCommerce (out of the box), the Google Analytics script (if enabled) is designed to be placed right before your </body> tag. But, there are some users / developers who prefer to place the Google Analytics script in the <head> section.

So what is the best location for your GA script? Well, practically the Google Analytics code will work regardless of where you put it on the page.

According to Google:

Where to Place the Tracking Code

The tracking code is designed to read data from your page after the content for the page has finished loading. For this reason, the snippet should be located just before the closing </body> tag for your web page. Once the content for your page has loaded, the tracking code, when executed, reads the content for your page following the Document Object Model (DOM). All information relevant to tracking is then used to establish page information, set/update cookies, and to send the GIF request to the Google Analytics servers.

By placing the script at the end of the page body, you ensure that the tracking code is executed as the last element of the DOM. If a given page load is interrupted for some reason, it is possible that the GIF request for that page view will not be executed. However, should you place the tracking code at the top of the page, any load interruptions might result in incomplete or inaccurate reporting anyhow, since the tracking code relies on page data for its reports.

Additionally, the physical placement of the tracking code call at the bottom of the page is more effective than using an onLoad() function to call the tracking code. If you use onLoad() to execute the tracking code, execution relies on the event model for the browser instead of the DOM. In such a situation, should a remote image fail to load on a page, onLoad() will not be called, whereas the DOM for the page could still load completely.


For more information, see this (source): 
https://developers.google.com/analytics/devguides/collection/gajs/gaTrackingOverview



This is how GA script location looks like by default in nopCommerce:

nopCommerce google analytics


So, let us go over the process if you wish to change the placement of your Google Analytics script from </body> to <head>.

Step 1: First, make sure you are using the source code version of nopCommerce (For more info, see web vs source code)

Step 2: Now, go to this location in your code: \Plugins\Nop.Plugin.Widgets.GoogleAnalytics\GoogleAnalyticPlugin.cs


nopCommerce google analytics


Step 3: Open this file "GoogleAnalyticPlugin.cs" and find this code:


public IList<string> GetWidgetZones()
     {
         return new List<string>
         {
             "body_end_html_tag_before"
         };
     }



Step 4: As, you can see in the default code, the widget zone that is defined for this plugin is "body_end_html_tag_before". Let's change the widget zone to "head_html_tag". Your updated code should look like this:


/// <summary>
        /// Gets widget zones where this widget should be rendered
        /// </summary>
        /// <returns>Widget zones</returns>
        public IList<string> GetWidgetZones()
        {
            return new List<string>
            {
                "head_html_tag"
            };
        }


Step 5: Now, make sure to rebuild "Nop.Plugin.Widgets.GoogleAnalytics" plugin and "Nop.Web" as well.

Step 6: That's it - Run your nopCommerce website and view the source code. You should see the Google Analytics script in the <head> section like this:


nopCommerce google analytics


Hope it helps!

About Author

Written By Lavish Kumar

Based out of New York, USA, Lavish Kumar is a full stack web developer by profession and founder of Striving Programmers, a trusted community for developers that offers a wealth of articles and forums to assist individuals with improving their software development skills.

Leave your comment