1

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

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.