OpenCart Google Tag Manager
Table of Content
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.
With the help of Opencart Google Tag Manager users 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 are logged in with the same Gmail account that was used for creating the Container ID.
- This module supports all templates and themes including the Journal theme.
- Opencart Google Tag Manager module supports the Multi-Store feature of default Opencart.
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.
- Supports multi-store.
- This module supports e-commerce enhance.
Note: For the chrome extension installation you need to add the following link on chrome:
Chrome Extension Installation Link
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 admin and 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 Extensions> Extension Installer and upload the XML file.
The XML file can be found on ocmod folder under the 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.
Note: Need to use the following ocmod path and the file name when the website is using the following:-
- ocmod – webkul_gtm.ocmod.zip (need to upload when the website is using http).
- ocmod>SSL – webkul_gtm.ocmod.zip (need to upload when the website is using SSL/https).
- ocmod>SSL>tire – webkul_gtm.ocmod.zip (need to upload when the client site has the tire theme patch).
After uploading the XML file go to the Extensions > Modification and click on the refresh field.
After that in the 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.
Manage Events You Want To Track
This module can manage or track the following events:
Product – Tracks the event when someone visits or searches the product page of the web store.
Customer Registration – Track the event when someone registers on the web-store.
Sign-In – Tracks the event when someone sign-in on the web-store.
Account Information -Tracks the event when a customer adds or edits the account information.
Category Page – Tracks the category page when a category will display to the customer.
Add To Wishlist Button – Tracks the event when a customer hits on the wishlist button.
Add To Cart – Tracks the event when a customer hits on add to cart button.
Cart Page/View Cart – Tracks the event when a customer visits the cart page.
Order Success – Track the event when an order is successfully placed.
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 the Google Tag Manager Terms of Service.
4: Now, you will see the container Id on the top menu bar. This container ID is to be put in the admin back-end configuration of the extension.
5. Now by navigating through Tag Manager > All Accounts you can also view the Container ID.
6. Now Go to the Tag Manager to create a tag.
7. Click on Add New Tag in the New Tag area.
8. Name the tag and click on Tag Configuration.
9.Click on Google Analytics: Universal Analytics, Select Track Type Page View and select New Variable in google analytics settings.
10. Enter the name of the tag and enter the tracking ID and save it.
11. Then click on the Tag section under the workspace.
12. In the Tag section the created tag will be visible.
Next Steps
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 types.
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.
How To Get Google Analytics ID?
In order to get Google Analytics Id you must need to Sign in to your Analytics account, after that follow the following steps:
- Click on Start Measuring.
2. Click on the Admin button on the bottom-left corner here the below page will appear. Click on Create Account.
3. Give the account name and click on next.
4.Choose the business type and fill in the business information and click on Create.
5. Now Select the Web, Android App, or IOS App for which you want to measure.
5. Set up a data stream for your website by filling the website URL, and stream name and click on Create Stream.
6. Now You will see the webstream details like Stream URL, Stream Name, and Measurement ID.
7.Now in the property settings option you need to enter the details like property name, industry category, select the reporting time zone, and currency displayed, and save it.
Here a property ID will create for that property.
Note: We have to trigger four pages; All Pages, Page View, DOM Ready, and Form Submission.
Next Steps
The following steps will be followed to trigger these pages:
- Go to the Tag Manager. Click on Create New Tag in New Tag section.
2. Enter the name of the tag which is to be created.
3. Choose a trigger or create a new one.
4. Name the trigger, Click on Trigger Configuration to choose a type of trigger.
5. Select the page views to which you want to fire a trigger.
6. The firing trigger is created.
7. Similarly, create all the firing triggers as Page view.
8. Click on Tag Configuration and select Google Analytics-GA4 Event. Select the configuration tag, enter the Measurement ID and event name and save it.
9. Go to Tag Manager then Workspace and here in the Tag section you can see all the firing triggers
Deploy Google Analytics And E-Commerce Enhance With Google Tag Manager
Using the Opencart Google Tag Manager module, the admin can deploy Google Analytics and E-commerce enhance 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 E-commerce enhance, 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, the 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 Google Analytics- GA4 Configuration as a tag type.
Now, the admin can configure the tag and choose the “Track Type” accordingly from the different tracking types- Page View, Form Submission, DOM Ready, and All Pages.
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 –
Product Page:
On the product page, the data layer shows the current product details.
Customer Registration
The customer can fill in the personal details for the registration process.
After submitting the details of registration the data layer will show the registration details.
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’s personal details is 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 the account information of the customer.
Category Page:
The Category page will display the collection of categories.
Hence, allowing the display of category details to be visible in the Data Layer of Google Tag Manager.
Add To Wishlist:
When the customer adds a product to the wishlist.
The data layer will display the event triggered by clicking on the ‘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 the cart.
the data layer will display for add to cart page.
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.
The data layer for the view cart page will be displayed as shown below:
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 issues feel free to add a ticket with your views to make the module better on the HelpDesk System.