Reading list Switch to dark mode

    Google Tag Manager for Shopware 5

    Updated 13 October 2023

    Introduction

    Google Tag Manager for Shopware 5 extension enables the merchants to integrate Google Tag Manager (GTM) with Shopware 5 eCommerce store. With GTM  implementation, the store owner can measure and analyze customers’ behavior on the online store by inserting tags code on product pages, shopping cart, checkout, etc.

    Note:

    Tag Assistant(By Google) should be installed on your chrome browser for checking the dataLayer of Google Tags.

    Features

    • Set GTM Container id  in the module configuration
    • Insert tags on category pages
    • The admin can add code snippets of google tag manager in their Shopware 5 website.
    • Easily configure the Google Tag Manager within your Shopware 5 Store.
    • Insert tags on product pages
    • Analyze customer’s shopping cart 
    • The admin can track and check analytics on Google of their Shopware 5 website.
    • Insert tags for search page
    • The admin can manage the JavaScript and HTML tags which are used for analytics on websites.
    • Implement tags for checkout page/order place
    • The Module works for all the products on website pages- Product page, Add To Cart, Category Collection page and many more.

    Installation

    Shopware provides two ways to install the plugin to the server.

    1. Using Command
    2. Manual installation

    Customers will get a zip folder, then they have to extract the contents of this zip folder on their system. The customer has Copy the folder WebkulGtm to custom/plugins directory of Shopware.

    As shown in the below image:

    Searching for an experienced
    Shopware Company ?
    Find out More
    google-tag-upload

    Now open the Shopware application in the Terminal.

    Run this command to refresh the plugin –

    ./bin/console plugin:refresh

    Go to your Shopware installation Root directory and run this command to install then activate the plugin –

    ./bin/console sw:plugin:install WebkulGtm
    ./bin/console sw:plugin:activate WebkulGtm

    To clear the cache run this command –

    ./bin/console sw:c:c

    Now refresh the administration.

    After that, visit administration Configration->Plugin Manager->Installed, the Google Tag Manager for Shopware 5 plugin will be listed there.

    unnamed-file

    Manual Installation

    1 – Go to the plugin manager by navigating Shopware backend – Configuration -> Plugin Manager.

    2 – Upload the zip from the plugin manager in the backend.

    upload-plugin-5

    3 – Click on the installed link on the left side menu in the plugin manager.

    4 – Check the plugin in the uninstalled category and then click on the install button.

    install-1

    5 – After the successful installation, click on the open button then activate it.

    activate-1

    After that, you have to enter the Container ID in the configuration.

    Note:

    After the installation process and plugin configuration if the Google Tag Manager for Shopware 5 icon will not visible at front-end then run this command to clear the cache:

    ./bin/console  sw:cache:clear –env=prod

    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) then click Continue.

    Set-Up-Container-ID-1-1200x560-1

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

    id

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

    terms-of-services

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

    add-new-tags

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

    your-container-id

    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.

    How To Add A New Tag In Google Tag Manager

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

    tag-manager

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

    untiteled-tag

    Here you will choose your tag type from the featured list or search for one.

    choose-tag-tpe

    After that, 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.

    tag-confogration

    Configure the Trigger for the tag after that click to the Save button.

    tag-configration3

    Set the name for your Tag then click to Save.

    tag-name

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

    submit

    A Sliding section comes up, here select Publish and Create versionenter version namedescription then click to the Publish button.

    submit-change

    After that, you can see the container is published.

    published-container

    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.

    create-account

    Configuration

    Now, go to configuration then enter the Container ID.

    container-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 –

    Category page: On the category page, the data layer shows the current product details.

    category-2

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

    product-page-2

    Shopping cart page:  Here, the data layer shows the checkout cart data and the cart data.

    shopping-cart-1

    Checkout page: On the checkout page, the data layer shows the complete order details.

    checkout

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

    order-succes-page

    Support

    If you have any issue, feel free to add a ticket and let us know your views to make the module better webkul.uvdesk.com

    Please explore our shopware development services and Quality shopware extensions .

    Current Product Version - 1.0.0.

    Supported Framework Version - Shopware 5.5.x & 5.6.x

    . . .

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    Be the first to comment.

    Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home

    Table of Content