> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.weltpixel.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How to solve compatibility issues - Google Tag Manager Enhanced eCommerce and Google Analytics 4

If you’ve installed **Google Tag Manager Enhanced eCommerce** or **Google Analytics 4** and your **product grid breaks** or **actions aren’t tracked** (e.g., product view, add to cart, checkout), the cause is usually a **compatibility conflict** with a custom theme or a 3rd-party extension that alters Magento’s default templates/blocks.

We guarantee full compatibility with **default Magento 2** and our **Pearl Theme**. Other themes may customize category/product listing templates, requiring small adjustments.

---

## Quick fix that resolves ~95% of cases

If you’re using a customized theme (not Pearl/Luma), apply the steps below to prevent layout overrides while keeping click tracking.

---

## A) Google Tag Manager Enhanced eCommerce (Universal Analytics)

### 1) Disable the layout rewrite from the GTM module
Edit: `app/code/WeltPixel/GoogleTagManager/view/frontend/layout/default.xml`  
Comment out the **category/product listing template rewrite** (the portion highlighted in your screenshot):

![Disable GTM layout rewrite](https://storage.crisp.chat/users/helpdesk/website/-/d/b/d/d/dbdd51bd7a87e000/3ce8c275-0d34-45a5-a2bb-026c29_lexxc.png)

### 2) Add product click tracking into your theme’s listing template
Open your **custom** product listing template (usually `list.phtml`) and inject the click tracking on the product image `<a>` element.

- Add the GTM helper attribute:

    `<?php echo $this->helper('WeltPixel\GoogleTagManager\Helper\Data')->addProductClick($_product, $iterator-1); ?>`

- Replace the original Magento image link (example):

    Original:
    
        <?php // Product Image ?>
        <a href="<?php /* @escapeNotVerified */ echo $_product->getProductUrl() ?>" class="product photo product-item-photo" tabindex="-1">
            <?php echo $productImage->toHtml(); ?>
        </a>

    Updated (note the helper printed inside the `<a ...>` tag):
    
        <?php // Product Image ?>
        <a <?php echo $this->helper('WeltPixel\GoogleTagManager\Helper\Data')->addProductClick($_product, $iterator-1); ?>
           href="<?php /* @escapeNotVerified */ echo $_product->getProductUrl() ?>"
           class="product photo product-item-photo"
           tabindex="-1">
            <?php echo $productImage->toHtml(); ?>
        </a>

### 3) Deploy changes
- Save/upload files
- Clear caches (and deploy static content if needed)

---

## B) Google Analytics 4 (GA4)

### 1) Disable the layout rewrite from the GA4 module
Edit: `app/code/WeltPixel/GA4/view/frontend/layout/default.xml`  
Comment out the **listing template rewrite** (as in your screenshot):

![Disable GA4 layout rewrite](https://storage.crisp.chat/users/helpdesk/website/-/9/3/5/6/9356968d21ee6000/003ee405-1a4c-46a3-b2da-c521c8_69cbma.png)

### 1a) (PRO only) Using Click Tracking via Measurement Protocol (Server-Side)
Extend the file:

- From: `app/code/WeltPixel/GA4/view/frontend/layout/weltpixel_ga4_serverside_select_item.xml`
- To: `app/design/frontend/<your_theme_vendor>/<your_theme>/WeltPixel_GA4/layout/override/base/weltpixel_ga4_serverside_select_item.xml`

Then **clear the XML body** (leave an empty layout container so it no longer rewrites your listing):

![Create override file path](https://storage.crisp.chat/users/helpdesk/website/-/7/d/d/6/7dd6970f88b7e00/b0253a2f-e526-46b4-832e-77e3e1_1ndlvjc.png)
![Empty XML body](https://storage.crisp.chat/users/helpdesk/website/-/c/e/a/a/ceaa340f3a4ca000/68339314-4189-4de4-89aa-b464b1_11squve.png)

### 2) Add GA4 product click tracking into your theme’s listing template
Open your **custom** `list.phtml` and adjust the Product Image link:

    <?php $ga4Helper = $this->helper('WeltPixel\GA4\Helper\Data'); ?>

    <?php // Product Image ?>
    <a <?php if ($ga4Helper->isProductClickTrackingEnabled()) :
            echo $this->helper('WeltPixel\GA4\Helper\Data')->addProductClick($_product, $iterator-1);
         endif; ?>
       href="<?php /* @escapeNotVerified */ echo $_product->getProductUrl() ?>"
       class="product photo product-item-photo"
       tabindex="-1">
        <?php echo $productImage->toHtml(); ?>
    </a>

### 3) Deploy changes
- Save/upload files
- Flush caches (and deploy static assets if applicable)

---

## If issues persist
The above fixes address the majority of conflicts. If your theme heavily customizes the Category/Product listing markup, a developer may need to adapt the snippet placement or adjust other blocks.

---

## Consider an integrated, compatible starting point
If you’re early in the project, using an integrated solution can save time otherwise spent on compatibility work. The **Pearl Theme** includes **Google Tag Manager**, **Quick View**, **Banner Slider**, **Instagram Widget**, and more — all compatible out of the box:  
https://www.weltpixel.com/magento-2-theme-pearl

---

## Example: Category Page conflict resolution

**Problem (summary):** After installing the GTM extension, the theme’s category product grid appearance changed due to a template override conflict.

**Files adjusted:**
- `app/code/WeltPixel/GoogleTagManager/view/frontend/layout/default.xml`  
  (Removed the category product listing template rewrite)
- `app/design/frontend/Infortis/ultimo/Magento_Catalog/templates/product/list.phtml`  
  (Added the GTM product click helper to the image link)

**Note:** We don’t have a universal, conflict-free solution for **all** themes that customize Category Page layouts. Minor adjustments by a developer may be necessary depending on your theme’s structure. Community suggestions are welcome.