0

I want to be able to track the clicks going on those buttons. I can't just track the links because they are some of the most common spots on our site. I gave each button a label as seen in one of the below code snippets. I think I set up my GTM tag up correctly where I made a new event, added my action and value of {{click element}} and label with a value of {{click text}}. Ideally I want to be able to see each click on each button in GA4. this is my GTM tag set up for reference

Here is my current 404.php file in my child theme.

<?php
/**
 * The template for displaying 404 pages (not found).
 *
 * @package          Flatsome\Templates
 * @flatsome-version 3.16.0
 */

get_header(); ?>

<?php do_action( 'flatsome_before_404' ); ?>

<?php
if ( get_theme_mod( '404_block' ) ) :
    echo do_shortcode( '[block id="' . get_theme_mod( '404_block' ) . '"]' );
else :
?>
    <div id="primary" class="content-area">
        <main id="main" class="site-main container pt" role="main">
            <section class="error-404 not-found mt mb">
                <div class="row">
                    <div class="col medium-3"><span class="header-font" style="font-size: 6em; font-weight: bold; opacity: .3">404</span></div>
                    <div class="col medium-9">
                        <header class="page-title">
                            <h1 class="page-title"><?php esc_html_e( 'Oops! That page can&rsquo;t be found.', 'flatsome' ); ?></h1>
                        </header>
                        <div class="page-content">
                            <p><?php esc_html_e( 'It looks like nothing was found at this location. Maybe try one of the links below or a search?', 'flatsome' ); ?></p>
                            <?php get_search_form(); ?>
                            <!-- Button Click Tracking Code -->
                            <script>
                                document.addEventListener('DOMContentLoaded', function() {
                                    let buttons = document.querySelectorAll('.button');
                                    buttons.forEach(function(button) {
                                        button.addEventListener('click', function() {
                                            gtag('event', 'click', {
                                                'event_category': '404_button_click',
                                                'event_label': button.textContent
                                            });
                                        });
                                    });
                                });
                            </script>
                            <!-- End Button Click Tracking Code -->
                        </div>
                    </div>
                </div>
            </section>
        </main>
    </div>
<?php endif; ?>

<?php do_action( 'flatsome_after_404' ); ?>

<?php get_footer(); ?>

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=INSERT GTM_ID HERE"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

Below are the buttons that I have on my current 404 page design (this is what I pulled from the flatsome UX builder which is why the syntax is like that).

[button text="Shop" color="white" radius="10" depth="1" depth_hover="4" icon="icon-angle-right" link="https://www.memoriapress.com/curriculum/classical-core-curriculum/" class="404-shop" data-404-click="true" data-404-label="Shop"]

[button text="Go To Blog" color="white" radius="10" depth="1" depth_hover="4" icon="icon-angle-right" link="https://www.memoriapress.com/articles/" class="404-blog" data-404-click="true" data-404-label="Go To Blog"]

[button text="YouTube" color="white" radius="10" depth="1" depth_hover="4" icon="icon-angle-right" link="https://www.youtube.com/memoriapress" class="404-youtube" data-404-click="true" data-404-label="YouTube"]

[button text="Contact Us" color="white" radius="10" depth="1" depth_hover="4" icon="icon-angle-right" link="https://www.memoriapress.com/support/contact-us/" class="404-contact" data-404-click="true" data-404-label="Contact Us"]
jambadrewsh
  • 11
  • 2

1 Answers1

0
  1. Don't give links to your site. Screenshot is ample.
  2. If you want to limit it to the 404 pages, you can. Just add a CJS variable that attempts to find the 404 text and factor it in your click trigger. Adding classes to CTAs is a definite overkill.
  3. You generally want to track navigations like these all over the site. You may then filter the clicks by the page name/title that would indicate that this is a 404.
BNazaruk
  • 6,300
  • 3
  • 19
  • 33
  • Could you give some example code for ntracking navigation like these all over the site, then filtering to get the 404 page? Since the 404 page doesn't have a specific url, I'm having trouble. – jambadrewsh Mar 28 '23 at 12:28
  • You don't filter it with code. You filter it on the GA side since GA automatically tracks not only urls, but also page titles. Your page title on the 404 pages is unique enough. – BNazaruk Mar 28 '23 at 14:48
  • But I want to track each individual click on each individual button though, not track the pages they go to by title, or even just get a page view analytic for the 404 page. The links on the buttons are very common links on the site (e.g., contact, shop, blog, etc.). Normally I would just look at GA4 and see the page views and filter by page title rather than url. With the 404 page being a template, and having 4 individual buttons, I want to have a way to track them. – jambadrewsh Mar 28 '23 at 19:50
  • you didn't really address anything. You can track everything as is with global button tracking on. Just add the 404 page title as a filter for button clicks and you will get all the button clicks on the 404. You should inspect how the tracking is happening, what data is being transferred through the network. This should help you better understand tracking. – BNazaruk Mar 28 '23 at 21:05
  • To get a more granular view of button clicks, I still need to add additional tracking code to the website. It's fine if you don't have that code, but that is specifically what I am asking for. – jambadrewsh Mar 29 '23 at 17:46
  • well of course you'll need GTM added in the 404's source. Otherwise no tracking. – BNazaruk Mar 29 '23 at 17:46
  • If you could, would you point me to a tutorial of how to do exactly what you're talking about? That would be helpful. I have GA4 set up, and GTM on my site. I'm in data streams on GA4 and enhanced measurement, but don't see a button click option on enhanced measurement. – jambadrewsh Mar 29 '23 at 17:57
  • You implement button tracking in GTM. Pretty much any basic GTM tutorial will show you how to track buttons. – BNazaruk Mar 29 '23 at 19:00