How do I add gtag code to specific button?

Site URL: https://www.allabouttreeslatx.com/

I need to add a gtag code to a particular button on my site. I have the code, but don't know how to apply it to a specific button.
Code Injector only allows for header and footer, but this need to be applied to a specific button.

Thanks!

@Samk903 Hi! Which specific button on your site would you like to add the gtag code to?

@Lesum The "Call Now" button at the bottom

@Samk903 Another question: Does your gtag code look like this? If not can you share a screenshot of your gtag code (hiding the gtag ID)

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

Step 1: Add Custom JavaScript for the Button

Since Squarespace's Code Injector applies scripts globally, you can use JavaScript to target and add the tracking code to the button.

1. Go to Pages>Web Tools> Code Injection>Footer.

2. Add the following script to the Footer section:

   <script>
   document.addEventListener("DOMContentLoaded", function () {
       // Select the button by its class or ID
       var targetButton = document.querySelector(".button-class-name"); // Replace with the actual button class or ID
   
       if (targetButton) {
           targetButton.addEventListener("click", function () {
               // Trigger the Google Analytics event
               gtag('event', 'click', {
                   'event_category': 'Button',
                   'event_label': 'Button Name or Page Name', // Replace with your button name or label
                   'value': 1
               });
           });
       }
   });
   </script>

   Step 2: Replace the Selector

           Replace .button-class-name with the class or ID of your button. For example:

• If the button has a class cta-button, use .cta-button.
• If the button has an ID #contact-us, use #contact-us.

11 hours ago, Lesum said:

@Samk903 Another question: Does your gtag code look like this? If not can you share a screenshot of your gtag code (hiding the gtag ID)

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

 

 

@Lesum

The tag is html and not a script.

 

<button onclick="return gtag_report_conversion('tel:800-123-4567')">Call Now!</button>

@Lesum Just checking back if you had any ideas? Thanks

@Samk903Try adding this code under Website > Pages > Website Tools > Code Injection > Header. 

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const button = document.querySelector('a[href="tel:3184150199"]');

    if (button) {
      button.setAttribute('onclick', "return gtag_report_conversion('tel:3184150199')");
    }
  });
</script>

Note: This script only adds the onclick event (that you provided) to the button on your Squarespace site.

Let me know how it goes.