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

    Magento 2 Google Tag Manager

    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.

    Advantages of using the Google Tag Manager

    1. Improves your website performance
      Google Analytics and Adwords surely slow down your website speed after you have put the codes on the source website. Google Tag Manager allows third-party to handle all your script-tags and you only need to add its code to your website.
    2. Remarketing Support
      This allows you to show your website ads repeatedly to the customers who have visited your site and clicked on your certain products. This helps in to get back your visitors again to your store.

    Facebook Pixel

    The Facebook pixel is one analytics tool that let’s you check how much effective your advertisements are by letting you understand the actions that people take on your website.

    The Facebook pixel has been merged with the Google Tag Manager extension for ease of use of both in a single module. Using the Facebook pixel, the admin can send the the data to Facebook for the various actions that the people take on your e-commerce store.

    Features

    • Easily configure Google Tag Manager in your Magento 2.
    • Enable or Disable the module from the back-end.
    • Takes less time to configure scripts within your store.
    • Track and check Analytics on Google.
    • Included Facebook Pixel module.

    Installation

    Customers will get a zip folder and they have to extract the contents of this zip folder on their system. The extracted folder has an src folder, inside the src folder you have the app folder. You need to transfer this app folder into the Magento 2 root directory on the server as shown below in the snapshot.

    After the successful installation, you have to run these commands in the Magento2 root directory.

    First command- php bin/magento setup:upgrade

    Second Command – php bin/magento setup:di:compile

    Third Command – php bin/magento setup:static-content:deploy

    After running the commands, you have to flush the cache from Magento admin panel by navigating through->System->Cache management as shown below.

    Translation

    For translating the module language, please go to app>code>Webkul>GoogleTagManager>i18n and edit the en_US.csv file. Now, translate the words on the right and upload the modified file to the same location. The filename of the translated file should be according to the language and region code in which you want to translate like de_DE.csv.

    Module Configuration

    Configuring GTM

    After the successful installation of the extension the admin will navigate to Stores->Configuration->Webkul-> Google Tag Manager Configuration.

    Here, the admin will be able to –

    • Enable the extension by selecting a Yes which brings up a section to enter the Container ID. Selecting a No will disable the extension.
    • Enter the Container ID here and then click the save button to save the configuration for GTM.

    Configuring Facebook Pixel

    To configure Facebook pixel navigate through Stores->Configuration->Webkul->Facebook Pixel.

    Here, the admin will be able to configure the General Settings and Manage the Events that the admin wants to track

    General Settings

    Here, the admin will –

    • Enable FB Pixel – Select Yes to enable else set it as No to keep disabled.
    • Enter Facebook Pixel ID – Enter the Facebook pixel ID.

    Manage Events you Want to Track

    Here, the admin will be able to manage various events that can be tracked. Each of these events can be enabled or disabled for use by the admin.

    • Product View – Tracks the event when someone visits the product page of the web store.
    • Category View – Tracks the event when someone visits the category page of the web store.
    • Add to Cart – Tracks the event when someone clicks on the add to cart button.
    • Add to Wishlist – Tracks the event when someone adds a product to his wishlist.
    • Initiate Checkout – Track the event when someone initiates a checkout on the web store.
    • Purchase – Track the event when someone purchases a product from the webstore.
    • Product Search – Track the event when someone searches for something using the search feature.
    • Customer Registration – Track the event when someone registers on the web store.

    How to get GTM Container ID?

    To get the Container Id you must first create an account at Google Tag Manager(Signup is free). Now, after going to this link follow the below steps –

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

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

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

    Step 5: Now the screen that appears, here you need to add few tags(as per required) and then publish to make the changes live.
    To add tags, navigate to New Tag -> Add New Tag

    Step 6: Now the section that comes up tap Tag Configuration to choose a tag type to begin the setup.

    Step 7: Now, choose your tag type from the featured list or search for one.

    Step 8: Now, select the Track Type as per your requirement, select Enable Overriding settings in this tag, and enter the Tracking Id from your Analytics.google.com account and then tap the Save button.

    Step 9: Configure the Trigger for the tag and tap Save button after that.

    Step 10: Set the name for your Tag and tap Save.

    Step 11: To publish click the Submit button on the top right-hand side.

    Step 12: A Sliding section comes up, here select Publish and Create version, enter version name, description and hit the Publish button.

    Step 13: You will see the container is published.

    Step 14: Lastly, click on the Tag Manager icon on the top left-hand corner or go to All Accounts. Here, you will see the Container ID. This container ID is to be put in the admin back-end configuration of the extension.

    How to get the Facebook Pixel ID?

    To get the Facebook Pixel ID you need to have create a Business Manager. A regular Facebook account also works for creating a Business Manager.

    Step 1: Navigate here to create a Facebook Pixel in your Facebook Business Manager.

    Note: Click on Login if you already have a Facebook account, else click on Sign up to create the Facebook account first.

    After login, you are navigated to the Facebook Event Manager account of your Facebook.

    Here, after clicking on “Get started”, you will get a pop when you will click on the Create button.

    After clicking on the Create button you will get a success message as per the below image.

    After this, you will find the Facebook Pixel ID.

    How to validate GTM Extension is Installed Correctly?

    To check if the Google Tag Manager is properly installed, the data on your website should get displayed as shown below in the snapshots.

    Note: To check this, you must have installed the Google Chrome browser extension – Tag Assistant(By Google).

    Some Examples

    Product Page: On the product page, the data layer shows the current product details.

    Cart-Page/Add to Cart: Here, the data layer shows the checkout cart data and the cart data.

    Order Success Page: On the order success page the data layer shows the purchased item details as shown below in the snapshot.

    Facebook Pixel – Workflow Frontend

    Once you have configured the module settings, log in to your Facebook Business Manager account.

    In the Data Sources section, select the Events tab. The admin can view Events and can view details of the Event by selecting “View Details“.

    On selecting View Details, a pop box will appear as shown below.

    Here, the admin can track the information for all the dynamic events of the Magento store conveniently.

    Verify Events

    The admin can even verify individual pages and make sure that the events are installed correctly. For this, the admin needs to install the Facebook Pixel Helper as a chrome extension. This is optional.


    Facebook Pixel Helper is a tool that checks the accuracy of the Facebook Pixel and tests that the pixel is working fine.

    Note – (Facebook Pixel will not work if any ad-blocker is enabled in your browser.)

    That’s all for the Magento 2 Google Tag Manager extension. Still, have any issue feel free to add a ticket and let us know your views to make the module better webkul.uvdesk.com

    Current Product Version - 2.1.0

    Supported Framework Version - 2.0.x, 2.1.x, 2.2.x, 2.3.x

    . . .

    Comments (4)

    Add Your Comment

  • manish
    hello webkul,

    greetings

    I have a multivendor marketplace store, and the marketplace extension id of some other vendor.

    1. Can I install this and will it be compatible.
    2. I have a facility where customer can search a vendor. Can I get data from those pages also.

    • Nishad Bhan
      Hello Manish,

      The extension works with the default Magento 2 store and for this extension to work correctly it has no dependency on any of the extensions installed within a website. So, you can install this extension and it will work just fine.

      Also, as you said “I have a facility where customer can search a vendor. Can I get data from those pages also.” For the extension to work for this will require customization(A Paid Service) as the extension only works for the default Magento 2 pages.

      For any further query on this kindly revert back to us at support@webkul.com

  • Shaba
    Is it possible to add facebook pixel using this tag manager extension?
    • Hari Narayan Bairwa
      For Facebook pixel, we are having a separate module you can check it – https://store.webkul.com/Magento2-Facebook-Pixel.html
      Using Magento 2 Facebook Pixel module you can integrate this analytics tool to your Magento store. This will allow the store owner to track visitors and their behavior on your website.
  • 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