Track Button Clicks on Pop-Ups Compared to How Many Times They Are Viewed

Ask the Community General Questions
1

Hi,

We have a few pop-ups running on our site and would like to track the ratio between the views these pop-ups receive and how many button clicks (submit) we get.

How can we implement this?

Thank you!

2 Likes
3

Hi @Sasha_Perry :wave:

Could you please share a link to the page where your popups are installed?

4

Hi Max,

We have several pop-ups.
2 appear throughout the week on the homepage www.foundermade.com

Kind regards,

Sasha

2 Likes
5

Thank you!

Do I get it right that you’d like to track clicks on all widget’s elements (close button, submit button, clicks on the widget itself)?

image
image620×964 127 KB

1 Like
6

We’d like to be able to track the close button, and the submit (/ register button on the alternate popup) yes!

2 Likes
7

Our devs have prepared a Google Analytics code for you. Please add this part of the code to your website <head>:

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

In the code above, you need to replace G-ID with your actual website ID for Google Analytics. This article will help you find your ID - Find your Google tag ID.

And then just add the rest of the script right before closing </body> tag:

  <script>
function eappsDispatchAnalyticsEvent(event, selector, config) {
    function sendEvent(config) {
      if (typeof ga !== "undefined") {
        ga('send', 'event', {
          eventAction: config.action,
          eventCategory: config.category,
          eventLabel: config.label
        });
      }
      if (typeof gtag !== "undefined") {
        gtag('event', config.action, {
          'event_category':  config.category,
          'event_label':  config.label
        });
      }
    }
    function isHitClass(e, selector) {
      return e.target && e.target.closest(selector)
    }
    if (isHitClass(event, selector)) {
      sendEvent(config);
    }
  }
  document.addEventListener('click', function (event) {
    eappsDispatchAnalyticsEvent(event, '[class*="Popup__PopupContent-sc"]', {
      action: 'click',
      category: 'Popup',
      label: 'Click on Elfsight Popup'
    });
    eappsDispatchAnalyticsEvent(event, '[class*="PopupCloseControl__PopupCloseControlContainer-sc"]', {
      action: 'click',
      category: 'Popup',
      label: 'Click on Elfsight Close Button Popup'
    });
    eappsDispatchAnalyticsEvent(event, '[class*="ButtonBase__ButtonContainer-sc"]', {
      action: 'click',
      category: 'Popup',
      label: 'Click on Elfsight Subscribe Button Popup'
    });
  }, true);
</script>

Please let me know if it helps and if you have any other questions :slightly_smiling_face:

2 Likes
8

Hi Max,

Sorry for late reply!

Will this track all of our elfsight popups?

Thank you,

1 Like
9

Also, is the second part of the script to still go in the header? I can’t see we have a in our header!

1 Like
10

Hi @Sasha_Perry :wave:

Yeah, this code will track clicks on all popups. The 2nd part of the script should be added to the website’s <body> and the 1st part of the code should be added to <head>.

Try it out and let me know if it worked :slightly_smiling_face:

11

Hi Max.
On Squarespace we can only add code to header and footer.

Sasha

1 Like
12

Got you!

In this case, please try to add the 2nd part of the code to the footer and let me know if it worked :slightly_smiling_face: