I am using Magento 2.3.5-p2
In it, my team have installed the WeltPixel Google Tag Manager Extension (GTM)
this extension is to make the process of GTM Implementation easier
the way that the GTM works is by executing necessary scripts when an event like listed below happens
- product being added into wishlist
- user adding to cart
- user checkout cart
dataLayer.push({
'event': 'trackEvent',
'eventDetails.category': '<event_category>',
'eventDetails.action': '<event_action>',
'eventDetails.label': '<event_label>'
});
this script above is javascript code that is run on the frontend ( client-side ) and able to be observed from the console browser by running the console.log(dataLayer)
command
Upon looking at the code inside the directory
app/code/WeltPixel/GoogleTagManager
I can see that at first, it will list out the necessary events that are to be implemented in the script
File path :
app/code/WeltPixel/GoogleTagManager/etc/frontend/events.xml
File content :
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Event/etc/events.xsd">
<event name="core_layout_render_element">
<observer name="weltpixel_googletagmanager" instance="WeltPixel\GoogleTagManager\Observer\CoreLayoutRenderElementObserver" />
</event>
<event name="checkout_cart_add_product_complete">
<observer name="weltpixel_googletagmanager" instance="WeltPixel\GoogleTagManager\Observer\CheckoutCartAddProductObserver" />
</event>
<event name="sales_quote_remove_item">
<observer name="weltpixel_googletagmanager" instance="WeltPixel\GoogleTagManager\Observer\SalesQuoteRemoveItemObserver" />
</event>
<event name="wishlist_add_product">
<observer name="weltpixel_googletagmanager" instance="WeltPixel\GoogleTagManager\Observer\WishListAddProductObserver" />
</event>
<event name="catalog_product_compare_add_product">
<observer name="weltpixel_googletagmanager" instance="WeltPixel\GoogleTagManager\Observer\CompareAddProductObserver" />
</event>
</config>
looking at the above code, it will trigger any code that is written in the observable file for that respective event, for example, the WishlistAddProductObserver, the Observer file responsible for that event is as below
File Path
app/code/WeltPixel/GoogleTagManager/Observer/WishListAddProductObserver.php
File Content
namespace WeltPixel\GoogleTagManager\Observer;
use Magento\Framework\Event\ObserverInterface;
class WishListAddProductObserver implements ObserverInterface
{
/**
* @var \WeltPixel\GoogleTagManager\Helper\Data
*/
protected $helper;
/**
* @var \Magento\Customer\Model\Session
*/
protected $customerSession;
/**
* @param \WeltPixel\GoogleTagManager\Helper\Data $helper
*/
public function __construct(\WeltPixel\GoogleTagManager\Helper\Data $helper,
\Magento\Customer\Model\Session $customerSession)
{
$this->helper = $helper;
$this->customerSession = $customerSession;
}
/**
* @param \Magento\Framework\Event\Observer $observer
* @return self
*/
public function execute(\Magento\Framework\Event\Observer $observer)
{
if (!$this->helper->isEnabled()) {
return $this;
}
$product = $observer->getData('product');
$this->customerSession->setAddToWishListData($this->helper->addToWishListPushData($product));
return $this;
}
}
as you can in the source code of the WishlistAddProductObserver.php there is the code line showing
$this->customerSession->setAddToWishListData($this->helper->addToWishListPushData($product));
I tried to trace this code to understand how does this code is executed on the frontend layer, but after doing so, I still do not understand how it works
how is the customerSession
being used to execute the dataLayer javascript? if there is any who can help explain on this
any help is kindly appreciated
Thank you