GTM：当类包含 div 而不是可点击元素（Elementor）时，点击跟踪

Question

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

Elementor 不允许我向 <a href> 链接添加类。相反，它只允许我向包含<div> 的最广泛的类添加一个类。

所以，这是我们的代码示例。在这个巨大的混乱中，唯一的类是埋在第一行中间的“标题类”，可点击元素是位于底部的<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">

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

有没有人想出如何解决这样的问题？

Answer 1

嗯，有几种方法。如果框架支持这样的回调，则捕获全局导航点击并对其进行 dataLayer 推送可能是最好的。

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

1. 在 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 或者如果结构发生变化，则循环遍历所有父元素。

2. 现在您有了一个 CJS var，当点击的元素是全局菜单的后代时，它会返回 true。好的。现在为所有此 CJS 等于 true 的链接点击触发。

3. 现在使用此触发器进行点击。

4. （可选）改进 CJS 逻辑以消除不必要的点击。

5. （可选）制作其他类似的 CJS 变量以正确填充操作和标签。