How to build trigger for button in form within Google Tag Manager?

Question

I have the following button, for which I want to create a Google Tag Manager trigger (but I seem to be unable to do so):

<div class="class-a class-b">
  <form class="class-c" action="https://www.example.com/test" method="get" onclick="window.open(this.action); return false;"> 
    <button type="submit">Open now</button>
  </form>
</div>

• Which type of trigger should I use (the auto-event variable does not work)?
• How would I need to configure the trigger to track a button click?
• What would I need to do in order to also catch the action value (i.e. the URL https://www.example.com/test)? Would I need Javascript for that to bind to its submit? If so, how?

Answer 1

1. You want to use the Any Click: All Elements.
2. In the trigger, you enable the "Some clicks" Then Click Element -> Matches CSS Selector -> button[type="submit"]
3. Optionally, you can add more conditions there.
4. Use this trigger in a new Tag. Use the Universal Analytics as a tag type.
5. Tag settings: change it from Pageview to Event. Now you have three fields for Category, Action and Label of your event.
6. Then you want to set your Action as a URL. Start typing {{ in that field and pick the variable to populate there like so:

That should be it.

Update to address the actual html given:

So just return this value in your CJS var:

{{Click Element}}.parentElement.getAttribute("action");

It should work for the exact html situation that you've provided. Then use this CJS in your tag and you should be good.