CODEWITHSUNDEEP
wordpressgoogle-tag-managerelementor
MOliver
MOliver

Reputation: 107

GTM: Click tracking when class is in containing div instead of on clickable element (Elementor)

I am trying to add analytics to a site built in Wordpress with Elementor. Our web designer built a mega nav that uses pictures and buttons and our leadership team wants to track clicks on the nav. My goal is to create an Event Category that will just show clicks on links in the main Nav, but I'm finding Elementor's code painfully difficult to work with.

Elementor does not let me add a class to an <a href> link. Instead, it only lets me add a class to the broadest containing <div>.

So, here's a sample of our code. The unique class in this huge mess is the "header-class" that is buried in the middle of that first line, and the clickable element is the <a href> nestled way down at the bottom:

<div class="elementor-element elementor-element-ebb0054 emm1right emm18hidden emm12dropdown emm37hidden elementor-widget__width-auto elementor-widget-tablet__width-auto elementor-hidden-tablet elementor-hidden-phone header-class emm emm98item emm2horizontal emm93h emm25center emm11tablet emm36left emm38yes elementor-widget elementor-widget-mega-menu" data-id="ebb0054" data-element_type="widget" data-settings="{&quot;highlight_current_item&quot;:&quot;yes&quot;,&quot;mobile_layout&quot;:&quot;dropdown&quot;,&quot;mobile_dropdown_fullwidth&quot;:&quot;yes&quot;,&quot;sub_animation&quot;:&quot;fade-in-down&quot;,&quot;sub_animation_speed&quot;:500,&quot;show_sub_click&quot;:&quot;yes&quot;,&quot;show_sub_click_target&quot;:&quot;item&quot;,&quot;layout&quot;:&quot;horizontal&quot;,&quot;pointer&quot;:&quot;underline&quot;,&quot;breakpoint&quot;:&quot;tablet&quot;,&quot;toggle_layout&quot;:&quot;icon&quot;}" data-widget_type="mega-menu.default">
            <div class="elementor-widget-container">
        <nav class="emm27 emm0 emm33fade-in-down emm30underline emm28dropout" aria-label="Desktop menu"><ul class="emm4" data-id="mega"><li class="emmi emmi6916 emm31 emm63 emm29 emm66 emm66 emm17" data-id="6916" data-level="0" data-parent="0" data-emm-settings="{&quot;fit&quot;:&quot;section&quot;}"><a class="emm6" aria-haspopup="true" aria-expanded="true" href="#" aria-label="Work"><span class="emm8">Work</span><button class="emm10" aria-label="Show sub menu" aria-pressed="false"><i></i></button></a><div class="emm5 emm26 emm81">       <div data-elementor-type="wp-post" data-elementor-id="6922" class="elementor elementor-6922" data-elementor-settings="[]">
                    <div class="elementor-inner">
                        <div class="elementor-section-wrap">
                        <section class="elementor-section elementor-top-section elementor-element elementor-element-4a5f900 elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="4a5f900" data-element_type="section" data-settings="{&quot;background_background&quot;:&quot;classic&quot;}">
                    <div class="elementor-container elementor-column-gap-default">
                        <div class="elementor-row">
                <div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-39c49cf" data-id="39c49cf" data-element_type="column">
        <div class="elementor-column-wrap elementor-element-populated">
                        <div class="elementor-widget-wrap">
                    <div class="elementor-element elementor-element-a04b8d0 pp-equal-height-yes pp-posts-thumbnail-ratio elementor-grid-3 elementor-grid-tablet-2 elementor-grid-mobile-1 elementor-widget elementor-widget-pp-posts" data-id="a04b8d0" data-element_type="widget" data-settings="{&quot;card_columns&quot;:&quot;3&quot;,&quot;card_columns_tablet&quot;:&quot;2&quot;,&quot;card_columns_mobile&quot;:&quot;1&quot;}" data-widget_type="pp-posts.card">
            <div class="elementor-widget-container">
        
    
    <div class="pp-posts-container">
                    
                                                
        <div class="pp-posts pp-posts-skin-card pp-elementor-grid pp-posts-grid" data-query-type="custom" data-layout="grid" data-page="6922" data-skin="card">
                    <div class="pp-post-wrap pp-grid-item-wrap">
                    <div class="pp-post pp-grid-item">
                    <div class="pp-post-thumbnail">
        <div class="pp-post-thumbnail-wrap">
            <a href="https://www.samplelink.com">

Since my unique class neither appears in the clickable link or the clickable element, I'm finding it impossible to tell Google Tag Manager which links are part of the nav.

Has anybody figured out how to get around an issue like this one?

Upvotes: 0

Views: 688

Answers (1)

BNazaruk
BNazaruk

Reputation: 8081

Well, there are a few approaches. Catching global nav clicks and doing dataLayer pushes on them would be likely best if the framework has support for callbacks like that.

There's also a dirty approach that wouldn't involve FE dev:

  1. In GTM, you make a custom JS variable. This variable uses the {{Clicked Element}} to get to its .parentElement and then again, so it looks like: return {{Clicked Element}}.parentElement.<however many times you need it to get to your destination>.parentElement.getAttribute("class").indexOf("header-class") !== -1 Or make a loop to iterate through all parents if the structure changes.

  2. Now you have a CJS var that returns true when a clicked element is a descendant of your global menu. Good. Now make a trigger for all link clicks where this CJS equals to true.

  3. Now use this trigger for your clicks.

  4. Optionally, improve the CJS logic to get rid of unwanted clicks.

  5. Optionally, make other similar CJS vars to properly populate actions and labels.

Upvotes: 1

Related Questions