If you've successfully followed all the extension installation instructions but notice that the module is breaking your product grid, or that some user actions are not tracked correctly (ex: product view, add to cart, checkout, etc), the issues are most likely stemming from a compatibility problem with the custom theme or 3rd party extensions that are installed on your which likely alter the default Magento functionality for those particular sections.
We only guarantee full compatibility of our extensions with the a default Magento 2 environment, as well as our and our Magento 2 Pearl Theme. This is because it's impossible to know how each vendor changes or alters the default Magento code in their products.
Solution:
In this particular case, and for these particular extensions, there is a solution that you can implement with relative ease, which should, in 95% of scenarios, resolve the conflict you're facing and restore the layout/missing functionalities.
If you have a customised theme, which is not our Pearl Theme or the default Magento Luma theme, you might need to apply the following adjustments in order to prevent the extension from breaking the listing pages and ensure the extension functions at full capacity.
Follow the process below to apply the compatibility adjustments:
For the Google Tag Manager Enhanced eCommerce (Universal Analytics) extension
1. Head into app/codeWeltPixel/GoogleTagManager/view/frontend/layout/default.xml and comment out the code highlighted in the image below:
2. Head into your custom listing template file (list.phtml) add or replace the following line inside the <a> tag for the displayed image in order to obtain the following:
<?php echo $this->helper('WeltPixel\GoogleTagManager\Helper\Data')->addProductClick($_product, $iterator-1); ?>
So, instead of the original Magento code, which should look something like this:
<?php // Product Image ?>
<a href="<?php /* @escapeNotVerified */ echo $_product->getProductUrl() ?>" class="product photo product-item-photo" tabindex="-1">
<?php echo $productImage->toHtml(); ?>
</a>
You should now have something similar to the following:
<?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. Save and upload the modified files and flush all available caches.
For the Google Analytics 4 extension
1. Head into app/codeWeltPixel/GA4/view/frontend/layout/default.xml and comment out the code highlighted in the image below:
IMPORTANT NOTE: If you're using the PRO version of the Google Analytics 4 extension, and are using Click Tracking via Measurement Protocol (Server-Side), there is an additional step you need to follow:
Extend the weltpixel_ga4_serverside_select_item.xml file found in app/code/WeltPixel/GA4/view/frontend/layout into app/design/frontend/your_theme_vendor/your_theme/Weltixel_GA4/layout/override/base
Open the file and remove everything in the XML body. You should be left with a file that looks like this:
2. Head into your custom listing template file (list.phtml) add modify the code in the Product Image section to look like this:
<?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. Save and upload the modified files and flush all available caches.
If the fix doesn't work or you don't manage to implement it properly, we advise looking into this issue with a Magento developer in order to identify the necessary compatibility adjustments and apply them, as additional modifications may be required, depending on the theme you're using.
----------------
If you're not too advanced with your current project, you can take a look at our integrated solution, which may be more time and cost efficient to use instead of working on compatibility issues:
Take a look at the Pearl Theme already includes Google Tag Manager, Quick View, Banner Slider, Instagram Widget and a bunch of other extensions that are fully compatible out-of-the-box. We created this starting point solution for Magento 2 projects in order for users to be able to focus on store development instead of compatibility issues. It may prove to be a good alternative for the project you are working on. Check it out here: https://www.weltpixel.com/magento-2-theme-pearl
----------------
Example of applying a Category Page conflict solution:
Problem:
"I recently downloaded and installed your Google Tag Manager extension for Magento 2. I have noticed that, since installing it, its makes over-rides to my product grid look. Can you help me fix this conflict?"
Solution:
These 2 files were modified:
/mnt/data/home/master/applications/magento/public_html/app/code/WeltPixel/GoogleTagManager/view/frontend/layout/default.xml
/mnt/data/home/master/applications/magento/public_html/app/design/frontend/Infortis/ultimo/Magento_Catalog/templates/product/list.phtml
default.xml - We removed the category product listing template rewrite, our Google Tag Manager module also rewrites the default the listing template
ist.phtml - Which is used for the current product listing template, we added the product click Google Tag Manager tracking code snippet, which was originally introduced in our rewritten template.
Note: At this moment, we don't have a conflict free, out-of-the-box solution for themes that customise the Category Page layout. Suggestions from the community are welcome, however!
Comments
10 comments
First of all i would like to thank WeltPixel team for taking time and documenting this issue.
Unluckily I am within those whose theme "product category grid screws up"
By the way, i use "Porto Magento Theme"
In my case product grid when Google Tag Manager is enabled product grid went from 4 rows ended up with 2 rows ( & reconfiguring theme settings didn't help)
So i found this tutorial & managed to comment out code in app/code/WeltPixel/GoogleTagManager/view/frontend/layout/default.xml
By commenting out the code in default.xml (this solved issue with grid)
I'm not a developer but as I understand by commenting out part of a code from module I limited some of its features?
Would appreciate a lot if you could leave a comment on that...
Also i found app/design/frontend/Smartwave/porto/Magento_Catalog/templates/product/list.phtml
In my case, it was different from what I saw here, again not a developer but changed it..
From
<?php // Product Image ?>
<div class="product photo product-item-photo">
<a href="<?php echo $_product->getProductUrl() ?>" tabindex="-1">
<?php
if($_category_config['aspect_ratio'])
$productImage = $_imagehelper->init($_product, $image)->constrainOnly(FALSE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize($image_width);
else
$productImage = $_imagehelper->init($_product, $image)->resize($image_width, $image_height);
$productImageUrl = $productImage->getUrl();
?>
<img class="product-image-photo default_image" src="<?php echo $productImageUrl; ?>" alt="<?php echo $productImage->getLabel(); ?>"/>
<?php if($_category_config['alternative_image']): ?>
<?php
if($_category_config['aspect_ratio'])
$productHoverImage = $_imagehelper->init($_product, $hover_image)->constrainOnly(FALSE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize($image_width);
else
$productHoverImage = $_imagehelper->init($_product, $hover_image)->resize($image_width, $image_height);
$productHoverImageUrl = $productHoverImage->getUrl();
?>
<?php if($productImageUrl != str_replace("/thumbnail/","/small_image/",$productHoverImageUrl)): ?>
<img class="product-image-photo hover_image" src="<?php echo $productHoverImageUrl; ?>" alt="<?php echo $productHoverImage->getLabel(); ?>"/>
<?php endif; ?>
<?php endif; ?>
</a>
TO
<?php // Product Image ?>
<div class="product photo product-item-photo">
<a href="<?php echo $_product->getProductUrl() ?>" tabindex="-1">
<a <?php echo $this->helper('WeltPixel\GoogleTagManager\Helper\Data')>getProductUrl() ?>" class="product photo product-item-photo" tabindex="-1">
<?php echo $productImage->toHtml(); ?>
</a>
Now everything seems to be working fine, but again im not sure if i could messed up some of the modules features whitch i dont see yet. So would appreciate WeltPixels comment alot!
@Andrei Leev Thank you, we had the same problem with Porto theme. So you comment out the part in app/code/WeltPixel/GoogleTageManager/view/frontend/layout/default.xml
And edit the file app/design/frontend/Smartwave/THEME/Magento_Catalog/template/product/list.phtml this way (I'm using a child theme, so I copied the file from the porto parent theme.):
(Around line 70 Porto 3.0.6):
Edit
Is this real, that the official documentation recommends to change the core code of the module? This is not a real solution, only an ugly hack. A composer update, or any plugin update will overwrite the modification...
Why don't you add a switch under config, which can turn on/off these overrides?
Adam,
Good point. Already added an option for it starting with version 1.7.3 - August 23, 2018.
Awesome, I confirm that this is solving the issue for the product click event.
I have Porto as well and I use their filtered product view instead of the regular list, hence you need to apply the fix to the following file:
app/design/frontend/Smartwave/porto/Smartwave_Filteredproducts/templates/grid.phtml (or whatever list you use, ie masonry, side ...)
However that does not solve the issue for the product impression.... any idea which tag I should search for to apply a similar fix ?
I guess you have good reason for cookie purposes to add this conditional to helper addProductClick function, but now those with custom templates can no longer use this method to add product clicks?
WeltPixel\GoogleTagManager\Helper\Data.php line 931 - v 1.10.5
I removed it for now to restore product clicks since cookies aren't an issue for me. If others with custom templates have GPDR requirements they could change this check to isEnabled since that also includes the cookie check.
But I think, cleaner solution for everyone moving forward might be to split the product click functionality by adding a second switch in config -
1. Turn on product click tracking - yes / no?
current - weltpixel_googletagmanager/general/product_click_tracking
2. update templates - automatically (yes) or customise yourself manually (no)?
new - weltpixel_googletagmanager/general/product_click_tracking_layout_update
and update default.xml layout to
and then the admin user can be explicit about the functionality required and the addProductClick function can stay as is?
I'm hoping someone can advise how to solve this issue. I've read all of the above, thanks to all the posters by the way. I'm using Porto theme, v4.0.4 and GA4 Pro.
Using what has been posted above, I have changed:
to
<a <?php echo $this->helper('WeltPixel\GA4\Helper\Data')->addProductClick($_product, $iterator-1); ?> href="<?php echo $_product->getProductUrl() ?>" tabindex="-1">In files:
app/design/frontend/Smartwave/porto_child/Magento_Catalog/templates/product/list.phtml
app/design/frontend/Smartwave/porto_child/Smartwave_Filteredproducts/templates/flex_grid.phtml
app/design/frontend/Smartwave/porto_child/Smartwave_Filteredproducts/templates/grid.phtml
app/design/frontend/Smartwave/porto_child/Smartwave_Filteredproducts/templates/masonry_grid.phtml
app/design/frontend/Smartwave/porto_child/Smartwave_Filteredproducts/templates/owl_list.phtml
app/design/frontend/Smartwave/porto_child/Smartwave_Filteredproducts/templates/side_list.phtml
app/design/frontend/Smartwave/porto_child/Smartwave_Filteredproducts/templates/small_list.phtml
This has restored category pages to how they should appear with setting Measure Product Clicks set to YES. However, if I turn on Enable Measurement Protocol Tracking Configuration, this breaks them again. Can anyone advise?
Thanks
Hi Ian,
Coincidentally, the theme I use is the same as yours, you can try to adjust WeltPixel/GA4/view/frontend/layout/weltpixel_ga4_serverside_select_item.xml instead of what the article says. In my case this works. Hope it helps you!
Alas... the product is good, but the customer service is not satisfactory.
Thank you Carr, that worked for me! I will see over the coming days whether we get full tracking with the module now.
Regards
Ian
Hey everyone! Thanks for your interactions with this article! We're glad to see it's helped provide some guidance in overcoming some of the compatibility problems you're facing with 3rd party themes.
We've updated the article a bit for increased clarity and have also added some recommendations for overcoming problems that appear when using tracking Product Clicks via the Measurement Protocol functionality in the PRO version of the module. Let us know if you have any other suggestions!
Please sign in to leave a comment.