Track Slider and input fields

Wishlist Calculator
1

Hi, we want to track any slider changes or direct number entires in our calculator form in google analytics. Can you state the custom code for this? Thanks!

1 Like
2

Hi there, @Marcel_Grosskopff :wave:

Unfortunately, there is no way to track the interactions with the Slider field at the moment. However, this is a cool idea and I’ve moved it to the Wishlist.

If more users upvote this request, we’ll try to think about it in the future :slightly_smiling_face:

3

Hi Max! Thanks for the quick answer - how about the input fields for the values? or the first button to start the form from the calculator (not the send the form button)?

1 Like
4

It’s impossible to track the input fields as well. However, we can create a GA code for tracking clicks on the button opening the form.

I’ve forwarded your request to the devs and will let you know once the solution is ready :slightly_smiling_face:

5

Hi there, @Marcel_Grosskopff :wave:

I am happy to inform you that our developers have prepared a Google Analytics code for you to track clicks on the button. 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:

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,
		});
	}
}

const waitForElement = (selector, root = document) => new Promise(res => {
  let i = 0;

  const check = () => {
    const component = root.querySelector(selector);

    if (component) {
      res(component);
    } else if (i !== 50) {
      setTimeout(check, 100);
      i++;
    }
  };

  check();
});

waitForElement('[class*="cta__Container-sc"]').then(button => {
  button.addEventListener('click', () => {
    sendEvent({
      action: 'click',
      category: 'Elfsight Calculator Widget',
      label: 'Click CTA Button'
    });
  });
});

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

1 Like