Menu Close
    Hire Us Request Quote Reading List Switch to Dark Mode

    OpenCart Google Tag Manager

    Introduction- Opencart Google Tag Manager

    When a user interacts with your content, triggers will be evaluated based on the events that you have specified, and the tags will fire accordingly.

    The user can add and update many types of tags like Google Ad Words, google optimize, custom HTML, custom tags and many other third-party tags.

    Note:

    • To check this feature on our Live Demo please use your Container Id in the module configuration field.
    • Make sure that within your browser, you should be logged in with the same Gmail account that was used for creating the Container Id.

    Features

    • Easily Configure the Google Tag Manager within your store.
    • The Module works for all the products on website pages- Product page, Add To Cart, Add To Wishlist, Category Collection page and many more.
    • The admin can add code snippets of Google Tag Manager in their Opencart store.
    • The Admin can track and check Analytics on Google of their Opencart store.

    What Is Google Tag Manager?

    It is a tag management system that allows you to quickly and easily update tags and code snippets on your website that are intended for traffic analysis and marketing optimization.

    The tag manager can also be said as a code management platform that fires all of your other tags according to the triggers that you will specify in the Google Tag Manager interface.

    It also handles third-party tags with ease. After the container snippet is deployed on your website no technical help is necessary to deploy new tags or editing the existing tags.

    How Does The Google Tag Manager Work?

    You just need to place a small snippet of code on your website. This snippet of code connects your app to the tag manager servers.

    You can now make use of the web-based user interface to install the tracking codes on your website, like – the Google Analytics tags.

    Now, you can configure triggers to fire when an event occurs.

    An event can be something like – a page load, a tap on a screen, or a form submission. It’s all done through the Tag Manager’s web interface.

    When a user interacts with your content, triggers will be evaluated based on the events that you have specified, and the tags will fire accordingly.

    Installation


    Customers will get a zip folder and they have to extract the contents of this zip folder on their system according to your Opencart version.

    The extracted folder has adminand ocmod folders.

    You need to transfer the admin folder into the Opencart root directory on the server as shown below.

    Once you have uploaded the folders, login to admin and then from the catalog section go to ExtensionsExtension Installer and upload the XML file.

    The XML file can be found on ocmod folder under module directory. In ocmod folder select the Opencart version you are using under which you will find webkul_gtm_2_3_0_0.ocmod.xml file.

    After uploading the XML file go to the Extensions > Modification and click on refresh field.

    After that in Admin panel go to System -> Users -> User Groups and edit ‘Administrator’ and choose to select all for both Access and Modify Permission for the permission that you want to provide and save it.


    Module Configuration – Opencart Google Tag Manager

    Once you have performed above steps you can now see the module under Extensions->Modules->Webkul Google Tag Manager from here you can install and edit it. Opencart Google Tag Manager | eCommerce GTM Manager

    Thus, allowing the admin can edit the module details as per requirement.

    • Specify the name of the store for the module.
    • Enable or Disable the Status of extension.
    • Enable or Disable Customer Information.
    • Set the Product Rating as Enable Or Disable.
    • Enter the Google Tag Manager Container Id.

    How to get the Container ID?

    To get the Container Id you must first create an account(Signup is free) at Google Tag Manager.

    Now, after going to this link follow the below Steps

    1: Enter the account name(as per your requirement) and then click Continue.

    2: Now set up the Containername(as per your requirement), select where to use the container and then click Create.

    3: Then on the pop-up, click Yes to confirm to the Google Tag Manager Terms of Service.

    4: However, now, click on the ‘back to home’ arrow on the top left-hand side. Where the admin can Add a new tag.

    5: Lastly, you will see the Container ID. This container ID is to be put in the admin back-end configuration of the extension.

    After the container id is generated, the admin can view the list of accounts along with their container id.

    Thus, the admin needs to select the particular container for which the container id will be added in the module configuration.

    Hence, now in order to fire the tags on your website, the events must be triggered.

    The admin can choose a trigger to make the tag fire.

    Or

    The admin can even add a new trigger by clicking- New>triggering Configuration>click on edit option,

    Henceforth, the admin can choose among various trigger type.

    Under the trigger type, there are various default events to choose from like Page View>Dom ready. 

    Now configure this event that is by selecting either All DOM Ready Events or Some DOM Ready Events checkbox and then save the settings.

    NOTE: The admin needs to log in through same Gmail id with the same browser which is used to generate the Container Id.

    Thus, the admin needs to select the “Preview Tab” in order to add the code snippet of Google Tag Manager as shown in the image below:

    You need to refresh the Previewing Workspace if in case the Tag manager does not display on the front end.

    Deploy Google Analytics And Other 3rd Party Tag With Google Tag Manager

    Using the Opencart Google Tag Manager module, admin can deploy Google Analytics and other 3rd party tags with Google Tag manager.

    So, to configure and deploy Google Analytics with Google Tag Manager, there must be a Google Analytics Tracking ID as shown in the above image.

    For example, we are using the Google Analytics tag to configure it with Google Tag Manager.

    Note: To configure other 3rd party tags, there must be a container Id.

    Here we used the Google Analytics container id to configure the Google Analytics with Google Tag Manager.

    Now, from the Google Tag Manager, admin can click on the “Add a new tag” button as shown in the above image-



    The admin can now enter the name of the tag and click on “Tag Configure” to configure the tag as shown in the above image-

    Hence, after that, a new slide will open from where the admin can choose the tag type from the list.

    Here, we selected the Google Analytics- Universal Analytics as a tag type.

    Now, the admin can configure the tag and choose the “Track Type” accordingly from the different tracking type- Page View, Event, Transaction, Social, Timing, Decorate Link and Decorate Form.

    However,the admin can also configure the Google Analytics Setting.

    Now, by clicking on “Enable overriding settings in this tag ” the admin enters the Google Analytics “Tracking ID” here.

    The admin also has more setting there which can be configured accordingly.

    The admin can also choose a trigger to make the tag fire or can also add a new trigger by clicking Add a new tag>triggering,

    Thus, the admin can choose the trigger from the list or add a new trigger.

    Frontend Workflow

    The admin can easily add code snippets of Google Tag Manager to their Opencart store and can track, check the Analytics for his store.

    The various pages on which the Tag Manager are displayed –

    Customer Registration

    The customer can fill the personal details for registration process.

    Thus, allowing the data layer to display the event to trigger when the customer registers.

    Sign In:

    Whenever, the customer login in with registered credentials it is visible in the tag manager. The customer personal details are displayed in the data layer.

    Account Information:

    The customer can change the account information in ‘Edit Your Account Information’.

    Hence, allow the data layer of the tag manager to display account information of the customer.

    Category Page:

    The Category page will display the collection of category.

    Hence, allowing the display of category details to be visible in the Data Layer of Google Tag Manager.

    Product Page:

    On the product page, the data layer shows the current product details.

    Add To WishList:

    When the customer add’s product to the wishlist.

    The data layer will display the event triggered by clicking on ‘Add To WishList’ Button.

    It will show all the details of the product including the rating, price, id and more vital details.

    Add To Cart:

    When adding a product to the cart from the product page, the data layer shows the details of the product added to cart.

    Cart Page:

    After adding multiple products to the cart and then going to the View Cart section, the data layer displays the details of the products within the shopping cart.

    On Order Success:

    On order success, the data layer shows the purchase details.

    That’s all for the Opencart Google Tag Manager extension. Still, have any issue feel free to add a ticket with your views to make the module better on webkul.uvdesk.com.

    Current Product Version - 3.2.0.0

    Supported Framework Version - 2.x.x.x, 3.x.x.x

    . . .

    Comment

    Add Your Comment

    Be the first to comment.

    Back to Top
    css.php
    Hire Us!
    Brief us about your requirements and we'll get back to you.
    Woo! Hooy!
    We have just recieved your project brief and our expert will contact you shortly.
    Send Again
    Close

    Table of Content

    Hide Index