Skip to the content

How to install DC Google Analytics with Enhanced e-Commerce

Configuring Google Analytics

Google Analytics is a free website stats tool from Google. It keeps track of statistics about the visitors and ecommerce conversion on your website.

Follow the next steps to enable Google Analytics integration:

  • Create a Google Analytics account and follow the wizard to add your website
  • You also will need to enable Enhanced Ecommerce in the Google Analytics Admin settings for your View e.g.:

  • Copy the Tracking ID into the 'ID' box of the plugin settings
  • Click the 'Save' button and Google Analytics will be integrated into your store

Installing the plugin

Upload the plugin to the /plugins folder in your nopCommerce directory.

Restart your application (or click 'Reload list of plugins' button).

Scroll down through the list of plugins to find the newly installed plugin.

Click on the 'Install' link to install the plugin.

Note: If you're running nopCommerce in medium trust, then it's recommended to clear your \Plugins\bin\ directory

Configuring the plugin

Click the configure button on the plugin.

You will come to the configuration page.

Firstly you'll need to fill in the licence key to activate the plugin. We would have sent you the licence key separately.

The licenced host will change to your url if the key is successful.

You'll find that some of the inputs are already filled in. These are default values for Google Analytics.

You can choose to include tax or not in your prices by selecting 'Include tax'.

Total Value Type

Total value type configures which value from the order is sent as the transaction total.

Choose from:

Gross Sale Total = Order Total

Net Sale Total = Order Sub Total (Sum of item prices excluding shipping)

Net Profit = Net Sale Total (see above) minus Product Cost

 

Checkout Step Assignment

The Checkout Step assignment allows you to track a customer on how far they proceed through the checkout.

Previously these were fixed values, which meant that if you changed the order of the checkout process, for example swapping the payment and order conformation pages, resulted in sending invalid data back to Google.

Now that we have given you the ability to change the values of each step in the checkout, this will no longer send invalid data back to Google.

This data presents a graph in Google Analytics.

 

 

How to use DC Google Analytics with Enhanced e-Commerce

Scroll through the pictures for the first few steps.

Measuring Ecommerce Activities

The plugin will submit data for the following actions:

  • Clicks on a product link.
  • Viewing product details.
  • Impressions and clicks of internal promotions.
  • Adding a product from a shopping cart.
  • Initiating the checkout process for a product.
  • Purchases.

Modified nopCommerce Views (cshtml) to enable Product Impression tracking

In order for product impression data to be sent, you have to modify the following views:

  • CategoryTemplate.ProductsInFridOrLines.cshtml
  • ManufacturerTemplate.ProductsInGridOrLines.cshtml
  • Search.cshtml
  • CrossSellProducts.cshtml
  • HomepageBestSellers.cshtml
  • HomepageProducts.cshtml
  • ProductsAlsoPurchased.cshtml
  • RecentlyAddedProducts.cshtml
  • RecentlyViewedProducts.cshtml
  • RecentlyViewedProductsBlock.cshtml
  • RelatedProducts.cshtml

If you have the default nop theme, we have already done this for you. You can find them in the themes folder of the downloaded DC Google Analytics plugin.

To add product impression tracking to your custom pages, you will need to add the following code.

(In Bold is what we have added, this is the code you will have to add to your views)

 

GAEnhanced_Impression - Example

<div class="item-grid">
   @{
      var i = 1;
   }

   @foreach (var item in Model)
    {
       <div class="item-box">
          @Html.Partial("_ProductBox", item)
          @Html.Widget("GAEnhanced_Impression", string.Format("{0}|{1}|{2}", item.Id, i++, "Products Also Purchased"))
       </div>
    }
</div>

 

The string.Format paramaters used represent:

  • {0} = Product ID
  • {1} = Position of the product on the page
  • {2} = Origin of product list (Homepage Best Sellers, Recently Added Products)

It is important that you leave the '|' in the string.Format.

When working with pagination, we use a different bit of code so that Google Analytics can use products on paginated pages.

 <div class="item-grid">
   @{
      var i = 1;
   }

   @foreach (var product in Model.Products)
    {
       <div class="item-box">
          @Html.Partial("_ProductBox", product)
          @Html.Widget("GAEnhanced_Impression", string.Format("{0}|{1}|{2}", product.Id, i++ + (Model.PagingFilteringContext.PageSize*(Model.PagingFilteringContext.PageNumber - 1)), Model.Name))
       </div>
    }
</div>

 

 

i++ + (Model.PagingFilteringContext.PageSize*(Model.PagingFilteringContext.PageNumber - 1))

 

This is used to get the product number out of a paginated list, it prevents duplicate positions getting passed to Google Analytics

I find their approach to our relationship very professional whilst being refreshingly realistic. We now consider them to be part of our team

Lee Crowhurst, Technical Director

Partner with the Experts

With over 200 years of combined experience in Microsoft business solutions, our team will help to get you up and running, as well as building a partnership that keeps you supported, all from our UK offices. 

From functionality and licencing to business strategy, we like your questions; contact our experienced team for open, honest and reliable advice so that we can find the answers.