Post by account_disabled on Feb 20, 2024 4:14:48 GMT
The areas we may want to measure on websites are almost unlimited. Although we think that click tracking mostly gives us information about user behavior, we may want to monitor many different areas such as video viewing, scroll, timer, element visibility. In this article, I will try to explain step by step how to measure the interaction that occurs when mouse hover is hovered over an area. For example, let's say we need such tracking on our e-commerce site. Let's try to create a follow-up that will work when our "Add to cart" buttons are hovered over, as shown below. First, we right-click on the area we want to monitor and click "Inspect". This is how we can see the class or ID values of our element, if any. Here, I copy the “add_to_cart_button” class value that I marked in the image below and note it down somewhere. Let's log in to our Google Tag Manager account installed on our site.
Let's click on the "Tags" section on the left panel and then click "New" in the Greece Phone Number section I marked below. Mouse hover does not have an internal listener on GTM, we have to create it custom. Therefore, after clicking “New”, we click on the “Tag Configuration” section and select “Custom HTML” from the section opened on the right. Then, let's copy the code below and paste it into the “Custom HTML” tag. This code block actually does the following: When you hover over the element with the “add_to_cart_button” class value that we noted above for 3 seconds, it runs a dataLayer and transmits it to GTM.
You must adapt this piece of code to suit yourself. You must replace the class value I specified as “add_to_cart_button” with the class value of your own element. Since it is a class selector, let's not forget to use a period at the beginning. However, you can also change the timer according to your own scenario. For example, if you have a hover action that shows text when hovered over, and you think it will take about 5 seconds for the user to read the text, you can change the value of "3000" in the relevant field to "5000" . <script> var btnInfoElements = document.
Let's click on the "Tags" section on the left panel and then click "New" in the Greece Phone Number section I marked below. Mouse hover does not have an internal listener on GTM, we have to create it custom. Therefore, after clicking “New”, we click on the “Tag Configuration” section and select “Custom HTML” from the section opened on the right. Then, let's copy the code below and paste it into the “Custom HTML” tag. This code block actually does the following: When you hover over the element with the “add_to_cart_button” class value that we noted above for 3 seconds, it runs a dataLayer and transmits it to GTM.
You must adapt this piece of code to suit yourself. You must replace the class value I specified as “add_to_cart_button” with the class value of your own element. Since it is a class selector, let's not forget to use a period at the beginning. However, you can also change the timer according to your own scenario. For example, if you have a hover action that shows text when hovered over, and you think it will take about 5 seconds for the user to read the text, you can change the value of "3000" in the relevant field to "5000" . <script> var btnInfoElements = document.