CODEWITHSUNDEEP
csstriggerscss-selectorsgoogle-tag-manager
johan855
johan855

Reputation: 1626

Generic CSS selector for GTM trigger

I'm trying to create a CSS selector to be able to match the following entries (The page-top-menu):

Header menu - Menu 1
DE
#page-top-menu > div > div.menu-wrapper > ul > li.i39.dropdown.layer.item-type-1.catid-0eca5a6c6e53f281b9e0469ca3d744fd > a
EN
#page-top-menu > div > div.menu-wrapper > ul > li.i40.dropdown.layer.item-type-1.catid-0eca5a6c6e53f281b9e0469ca3d744fd > a
FR
#page-top-menu > div > div.menu-wrapper > ul > li.i28.dropdown.layer.item-type-1.catid-0eca5a6c6e53f281b9e0469ca3d744fd > a


Header menu - Menu 2

DE 
#page-top-menu > div > div.menu-wrapper > ul > li.i43.dropdown.layer.item-type-2.catid-9268a9eaa067019916390b7d08113781 > a
EN
#page-top-menu > div > div.menu-wrapper > ul > li.i43.dropdown.layer.item-type-2.catid-9268a9eaa067019916390b7d08113781 > a
FR
#page-top-menu > div > div.menu-wrapper > ul > li.i40.dropdown.layer.item-type-2.catid-9268a9eaa067019916390b7d08113781 > a

As you can see, they all have this in common:

#page-top-menu > div > div.menu-wrapper > ul > li

however when I try to create the tigger based on the following selectors, nothing happens:

#page-top-menu > div > div.menu-wrapper > ul
#page-top-menu > div > div.menu-wrapper > ul > li
#page-top-menu > div > div.menu-wrapper > ul > li > *

If I use the full CSS selectors, the triggers work.

EDIT:

here is an example of one of the html elements (The highlighted part is the one the selector refers to):

enter image description here

Here is a snapshot of how the Tag and triggers are set up:

enter image description here

Upvotes: 1

Views: 575

Answers (1)

Victor Leontyev
Victor Leontyev

Reputation: 8736

The problem is that your a element has child elements. And when you clicked element inside tag a it will fire click event, but click element will point to inner tag. You have two ways how to solve it:

1) Target all children elements in multi levels:

Type: Click - All Elements

CSS selector: #page-top-menu > div > div.menu-wrapper > ul > li *

2) Target only link:

Type: Click - Just Links

CSS selector: #page-top-menu > div > div.menu-wrapper > ul > li > a

Upvotes: 2

Related Questions