If you successfully followed all installation instructions but notice that extension is breaking your product grid or some user actions are not tracked correctly (ex: product view, add to cart, checkout, ..) most probably issues come from compatibility with the custom theme or 3rd party extensions that are installed on your store and probably alters default Magento functionality for that particular sections. We only guarantee full compatibility of our extensions with default Magento behaviour and our magento 2 Theme Pearl as it's impossible to know how each vendor change default Magento code in their products and the quality of their code.
Solution:
Yes, we have a solution for you. If you are using a custom template and experiencing a conflict, most probably (95% of the cases) the fix presented below will solve your problem.
If you have a customized theme, not our Pearl theme or the default Magento theme, you might need to do the following adjustments if the product listing is customized in your theme, in order to not break your product listing pages and to fully benefit of our GTM tracking implementation.
As in the displayed screenshot comment out the highlighted area ( this contains the changed product listing from our module, located in WeltPixel/GoogleTagManager/view/frontend/layout/default.xml ).
After this, in your custom listing template (list.phtml) add the following line inside the <a> tag for the displayed image:
<?php echo $this->helper('WeltPixel\GoogleTagManager\Helper\Data')->addProductClick($_product, $iterator-1); ?>
So, instead of original Magento code:
<?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 this in your list.phtml:
<?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>
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 necessary compatibility adjustments.
----------------
If you are not too advanced with your current project, you can take a look at our integrated solution. It may be more cost / time efficient to use it instead of working on compatibility issues:
Take a look at Pearl Theme that already includes Google Tag Manager , Quick View, Banner Slider, Instagram Widget and 10 other extensions that are already provided with the theme and fully compatible. We created this starting point solution for Magento 2 projects in order for the users to be able to focus on store development instead of compatibility issues. Maybe it's a good alternative for the project you are working on. https://www.weltpixel.com/magento-2-theme-pearl
----------------
Example of category page conflict solving:
Issue:
" I recently downloaded and installed your GTM extension for M2. I have noticed, since installing it, its make over-rides to my product grid look. Can you help fixing this conflict?"
Solution:
"These 2 files were modified:
/mnt/data/home/master/applications/magento/public_html/app/design/frontend/Infortis/ultimo/Magento_Catalog/templates/product/list.phtml
/mnt/data/home/master/applications/magento/public_html/app/code/WeltPixel/GoogleTagManager/view/frontend/layout/default.xml
In the first one we removed the category product listing template rewrite, our GoogleTagManager module also rewrites the by default the listing template
In the second one, which is used for the current product listing template, we added the product click GTM tracking code snippet, which was originally introduced in our rewritten template."
Note: At this moment we do not have a conflict free "out of the box" solution for the themes that customize category layout. We are investigating potential solutions, any suggestions from you guys are welcomed.
Comments
5 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 ?
Please sign in to leave a comment.