GTM & GA: 50 ways to build a trigger

The problem is all inside your head She said to me The answer is easy If you take it logically I'd like to help you In your struggle to be free There must be 50 ways to build a trigger

I want to track clicks on this button.

Green Button

Right-click (or control-click on a Mac) the button, and choose Inspect Element. Check out the button (and its inner <span> and containing <div>) code. All of the following trigger definitions will track clicks (or link clicks) on this button, using just the built-in variables. Enjoy!

1. Link Click Trigger: {{Click URL}} <equals> https://www.youtube.com/watch?v=xhasLyfuT4Y
2. Link Click Trigger: {{Click URL}} <contains> www.youtube.com/watch?v=xhasLyfuT4Y
3. Link Click Trigger: {{Click URL}} <matches regex (ignore case)> youtube.*xhasLyfuT4Y
4. Link Click Trigger: {{Click Text}} <equals> Green Button
5. Link Click Trigger: {{Click Target}} <equals> paul-simon-window
6. Link Click Trigger: {{Click Target}} <starts with> paul-simon
7. Link Click Trigger: {{Click Target}} <contains> simon
8. Link Click Trigger: {{Click Target}} <matches regex> ^paul.*window$
9. Link Click Trigger: {{Click ID}} <equals> one-and-only-green-button
10. Link Click Trigger: {{Click Classes}} <equals > green-button white-text
11. Link Click Trigger: {{Click Classes}} <contains > green-button
12. Link Click Trigger: {{Click Element}} <matches css selector> a[href*="https://www.youtube.com/watch?v=xhasLyfuT4Y"]
13. Link Click Trigger: {{Click Element}} <matches css selector> a[target*="paul-simon-window"]
14. Link Click Trigger: {{Click Element}} <matches css selector> a#one-and-only-green-button
15. Link Click Trigger: {{Click Element}} <matches css selector> #one-and-only-green-button
16. Link Click Trigger: {{Click Element}} <matches css selector> a#one-and-only-green-button.green-button
17. Link Click Trigger: {{Click Element}} <matches css selector> #one-and-only-green-button.green-button
18. Link Click Trigger: {{Click Element}} <matches css selector> a.green-button
19. Link Click Trigger: {{Click Element}} <matches css selector> .green-button
20. Link Click Trigger: {{Click Element}} <matches css selector> .green-button.white-text
21. Link Click Trigger: {{Click Element}} <matches css selector> [data-title="This is my Green Button"]
22. Link Click Trigger: {{Click Element}} <matches css selector> [data-title^="Green"]
23. Link Click Trigger: {{Click Element}} <matches css selector> [data-title|="This"]
24. Link Click Trigger: {{Click Element}} <matches css selector> [data-title^="This"]
25. Link Click Trigger: {{Click Element}} <matches css selector> [data-title*="my Green"]
26. Link Click Trigger: {{Click Element}} <matches css selector> div#button-container-id *
27. Link Click Trigger: {{Click Element}} <matches css selector> div#button-container-id > a
28. Link Click Trigger: {{Click Element}} <matches css selector> div#button-container-id a
29. Link Click Trigger: {{Click Element}} <matches css selector> #button-container-id > a
30. Link Click Trigger: {{Click Element}} <matches css selector> #button-container-id a
31. Link Click Trigger: {{Click Element}} <matches css selector> div a.green-button
32. Link Click Trigger: {{Click Element}} <matches css selector> div > a#one-and-only-green-button
33. Link Click Trigger: {{Click Element}} <matches css selector> div > a.green-button
34. Link Click Trigger: {{Click Element}} <matches css selector> a#one-and-only-green-button.green-button
35. Click Trigger: {{Click Text}} <equals> Green Button
36. Click Trigger: {{Click Classes}} <equals> button-text
37. Click Trigger: {{Click ID}} <equals> green-button-span
38. Click Trigger: {{Click Element}} <matches css selector> #green-button-span
39. Click Trigger: {{Click Element}} <matches css selector> span#green-button-span
40. Click Trigger: {{Click Element}} <matches css selector> span.button-text
41. Click Trigger: {{Click Element}} <matches css selector> #green-button-span.button-text
42. Click Trigger: {{Click Element}} <matches css selector> span#green-button-span.button-text
43. Click Trigger: {{Click Element}} <matches css selector> div#button-container-id span
44. Click Trigger: {{Click Element}} <matches css selector> div#button-container-id #green-button-span
45. Click Trigger: {{Click Element}} <matches css selector> div#button-container-id .button-text
46. Click Trigger: {{Click Element}} <matches css selector> div.button-container-class #green-button-span
47. Click Trigger: {{Click Element}} <matches css selector> .green-button *
48. Click Trigger: {{Click Element}} <matches css selector> #button-container-id *
49. Click Trigger: {{Click Element}} <matches css selector> #one-and-only-green-button > span
50. Click Trigger: {{Click Element}} <matches css selector> .green-button > span

There are literally infinite ways to do this. Here are a few things that should help to explain and enlighten the 50 ways shown here:

• Click Triggers (as opposed to Link Click Triggers) will report the innermost element that was clicked. In this case, it's the <span>.  The <span> doesn't have an href attribute, so if you use a Click Trigger, {{Click URL}} will be blank.  {{Click ID}} and {{Click Classes}} will refer to the <span>'s id and classes.
• Link Click Triggers will only fire if an <a> tag is clicked, and will always refer to that element.  That means that {{Click ID}}, {{Click Classes}}, etc. will always refer to the <a> tag's id and classes.
• Simo Ahava has an excellent post about GTM matches css triggers
• Here's a CSS selector overall reference, and a great reference for using CSS selectors on attributes
• This regular expression (regex) tutorial got me started with regex