GTM：当 class 包含 div 而不是可点击元素时的点击跟踪 (Elementor)

Question

我正在尝试将分析添加到使用 Elementor 在 Wordpress 中构建的网站。我们的网页设计师构建了一个使用图片和按钮的大型导航，我们的领导团队希望跟踪导航上的点击。我的目标是创建一个事件类别，它只会在主导航中显示对 link 的点击，但我发现 Elementor 的代码很难使用。

Elementor 不允许我将 class 添加到 <a href> link。相反，它只允许我将 class 添加到最广泛的包含 <div>.

所以，这是我们的代码示例。在这个巨大的混乱中，唯一的 class 是埋在第一行中间的“header-class”，可点击的元素是位于底部的 <a href> :

<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">

由于我的唯一 class 既没有出现在可点击的 link 元素中，也没有出现在可点击的元素中，我发现无法告诉 Google 跟踪代码管理器哪个 link是导航的一部分。

有没有人知道如何解决这样的问题？

Answer 1

好吧，有几种方法。如果框架支持这样的回调，那么捕捉全局导航点击并对其进行数据层推送可能是最好的。

还有一种不涉及 FE 开发人员的肮脏方法：

在GTM中，你制作一个自定义的JS变量。此变量使用 {{Clicked Element}} 获取其 .parentElement 然后再次访问，因此它看起来像：return {{Clicked Element}}.parentElement.<however many times you need it to get to your destination>.parentElement.getAttribute("class").indexOf("header-class") !== -1 或者如果结构发生变化，则循环遍历所有父元素。
现在你有一个 CJS 变量，当被点击的元素是全局菜单的后代时，returns 为真。好的。现在触发所有 link 次点击，其中 CJS 等于 true。
现在使用此触发器触发您的点击。
可选地，改进 CJS 逻辑以消除不需要的点击。
可选地，制作其他类似的 CJS 变量以正确填充操作和标签。

GTM：当 class 包含 div 而不是可点击元素时的点击跟踪 (Elementor)

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

wordpress

google-tag-manager

elementor