[Support request] google tag manager button or menu event implementation

[Michael]

Hi i have goals set for google analytics when visitor click a button or menu item that open my affiliate page, or call my business phone or whatsapp.
to track how many clicks i get on my affiliate pages, or whatsapp or telephone click for my web visitor.

but i have not found a way to capture google tag manager event when visitor click the generatepress element->button on my header. or in the body of my webpage. where can i input the information to capture that visitor event

[Fernando]

Hi Michael,

Here is an article that may assist you with regards to this: https://docs.generatepress.com/article/implement-google-tag-manager/

If you’re referring to this section: https://www.wpbeginner.com/wp-tutorials/how-to-add-google-analytics-event-tracking-in-wordpress/#:~:text=Adding%20Google%20Analytics%20Event%20Tracking%20onClick

Maybe this link could assist: https://zozimus.com/how-to-track-a-button-click-event-in-google-analytics-using-google-tag-manager/

Kindly let us know how it goes. 🙂

[Michael]

Hi Fernando, than you for the link tutorial, i have followed the zozimus tutorial to this part:

8. Click the CTA you want to track
While holding my “CTRL” key on my keyboard so that the link click doesn’t reload my website, I click the facebook icon and immediately see a “gtm.click” under the summary section in the QUICK_PREVIEW. Click “Variables”. Depending on how your website was built, you may see variables like “click element,” “click classes,” “click id,” “click target,” “click URL” or “click text”.

THis is the result of variables on GTM preview :

dataLayer.push({
event: “gtm.click”,
gtm.element: “SVGPathElement: html > body.home.page-template-default.page.page-id-2127.logged-i” +
“n.admin-bar.wp-custom-logo.wp-embed-responsive.theme-generatepress.sticky-menu-no” +
“-transition.sticky-enabled.both-sticky-menu.woocommerce-js.wp-featherlight-captio” +
“ns.no-sidebar.nav-below-header.one-container.contained-header.active-footer-widge” +
“ts-3.nav-aligned-right.header-aligned-center.dropdown-hover.customize-support.usi” +
“ng-mouse > div.gb-container.gb-container-d12d38a7.sticky > div.gb-inside-containe” +
“r > div.gb-grid-wrapper.gb-grid-wrapper-6afd3ed7 > div.gb-grid-column.gb-grid-col” +
“umn-b07ee0e9 > div.gb-container.gb-container-b07ee0e9 > div.gb-inside-container >” +
” div.gb-button-wrapper.gb-button-wrapper-4165136f > a.gb-button.gb-button-ae8e81c” +
“0 > span.gb-icon > svg > g > path”,
gtm.elementClasses: “”,
gtm.elementId: “”,
gtm.elementTarget: “”,
gtm.elementUrl: “”,
gtm.uniqueEventId: 6
})

there is no information on : “click element,” “click classes,” “click id,” “click target,” “click URL” or “click text”

in generatepress->elements->button, where can i input information about :

“click classes,” “click id,” “click target,” “click URL”
(i dont use click text for button on header bar just icon button )

[David]

Hi there,

maybe this article would be of better use ?

https://easyreporting.io/how-to-track-button-clicks-in-google-analytics-4/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Michael]

i have done some testing, and i have found that, when visitor click on the button icon vs click on button text, the GTM element information is different.

this is element information if visitor click on the icon :

dataLayer.push({
event: “gtm.click”,
gtm.element: “SVGPathElement: html > body.home.page-template-default.page.page-id-2127.logged-i” +
“n.admin-bar.wp-custom-logo.wp-embed-responsive.theme-generatepress.sticky-menu-no” +
“-transition.sticky-enabled.both-sticky-menu.woocommerce-js.wp-featherlight-captio” +
“ns.no-sidebar.nav-below-header.one-container.contained-header.active-footer-widge” +
“ts-3.nav-aligned-right.header-aligned-center.dropdown-hover.customize-support > d” +
“iv.gb-container.gb-container-d12d38a7.sticky > div.gb-inside-container > div.gb-g” +
“rid-wrapper.gb-grid-wrapper-323e7c0a > div.gb-grid-column.gb-grid-column-696e66de” +
” > div.gb-container.gb-container-696e66de > div.gb-inside-container > div.gb-butt” +
“on-wrapper.gb-button-wrapper-cccb7265 > a.gb-button.gb-button-220b9981 > span.gb-” +
“icon > svg > g > path”,
gtm.elementClasses: “”,
gtm.elementId: “”,
gtm.elementTarget: “”,
gtm.elementUrl: “”,
gtm.uniqueEventId: 10
})

This information if visitor click on the button area / text area of button

dataLayer.push({
event: “gtm.click”,
gtm.element: “https://–websitename–/shopee/: html > body.home.page-template-default.page” +
“.page-id-2127.logged-in.admin-bar.wp-custom-logo.wp-embed-responsive.theme-genera” +
“tepress.sticky-menu-no-transition.sticky-enabled.both-sticky-menu.woocommerce-js.” +
“wp-featherlight-captions.no-sidebar.nav-below-header.one-container.contained-head” +
“er.active-footer-widgets-3.nav-aligned-right.header-aligned-center.dropdown-hover” +
“.customize-support.using-mouse > div.gb-container.gb-container-d12d38a7.sticky > ” +
“div.gb-inside-container > div.gb-grid-wrapper.gb-grid-wrapper-323e7c0a > div.gb-g” +
“rid-column.gb-grid-column-696e66de > div.gb-container.gb-container-696e66de > div” +
“.gb-inside-container > div.gb-button-wrapper.gb-button-wrapper-cccb7265 > a.gb-bu” +
“tton.gb-button-220b9981”,
gtm.elementClasses: “gb-button gb-button-220b9981”,
gtm.elementId: “”,
gtm.elementTarget: “_blank”,
gtm.elementUrl: “https://–websitename–/shopee/”,
gtm.uniqueEventId: 5
})

if visitor click on the text area of the button, i have all the information i need to identify the event in GTM, but if visitor clicking on icon part on my button , i will have problem identifying that button click event.

any solution for this problem?…

[David]

Try adding this CSS to prevent the icon from being clicked:

.gb-button-wrapper .gb-button .gb-icon {
    pointer-events: none;
}

That should stop the icon from becoming an EventTarget

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Michael]

it worked !, great solution David, thank you. 😊👍

[David]

Glad to be of help!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts