Timer trigger enable condition match css selector isn't working

I'm having a problem with css selector in Google tag manager Timer trigger. Hoping someone can help. When users press on a play button, the timer will be triggered and fire a tag only when it's playing. The reason i use Timer trigger is to see how long the live music has been listened roughly until users press stop or close the page. I have added a timer trigger in GTM with click element match css selector but it's not enabling the timer. Sometimes the click node is "svg". Sometimes click node is "use". If i only use page path contains /path/, it works. button.c-hero-output__control *,svg.c-icon.c-hero-output__control-icon,svg.c-icon.c-hero-output__control-icon * is_playing (in the timer trigger image) is a return value from a function in GTM and working well.

<div class="c-hero-output__info"><button type="button" class="c-hero-output__control" data-player-target="playButton" data-action="click->player#play" data-player-audio-url-param="https://fdskjfsfds/radio.mp3?Device=LivePlayer" data-player-audio-type-param="audio/mp3" data-player-title-param="music" data-player-subtitle-param="radio" data-player-image-url-param="https://aiircdn.com/5d.png" data-player-is-live-param="true" data-player-is-adswizz-enabled-param="true" data-player-service-id-param="3211" aria-label="Play Radio" aria-pressed="false" data-aria-play-label="PlayRadio">
                        <svg class="c-icon c-hero-output__control-icon" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                            <use href="#icon-play" xlink:href="#icon-play" data-player-target="playButtonIcon"></use>
                        </svg>
                    </button><div>..........</div></div>

I used the idea you gave me @darrelltw. This is what've done so far. The problem is the timer will keep going event it's not playing. (not sure how to write in js)

1 variable: to get the value if the player is playing
2 triggers: play btn clicked on the certain btn, custom event isplaying equal to true.
2 tags:
- custom html tag with setInterval 10 sec timer and certain btn click trigger(click element.match css selector.[data-player-target],[data-player-target] *,.c-hero-output__control,.c-hero-output__control *,button.c-hero-output__control svg,button.c-hero-output__control svg *, button.c-hero-output__control use,button.c-hero-output__control use *). The problem with this tag. Every time the certain btn clicked, it will be triggered so the duplicated javascript will appear. I did add trigger group of btn clicked and isplaying, however, the timer won't be triggered.
- GA4 event tag with custom event trigger
```
<script>  
    //var timertracking;
       // function to track time
      function playerTrackTime() {
        currentTime = Date.now();
        window.dataLayer = window.dataLayer || [];
        dataLayer.push({'event':'10secInterval',
                        'timer_currenttime':currentTime,
                       });
      }
  if ({{is_playing}}==true) {
    //playerInterval();
    setInterval(playerTrackTime, 10000);
  } else {
   //clearInterval(timertracking);
  }
</script>
```

Solution

I think the Timer trigger can not be triggered by a click event.

The Timer Trigger will only load on the pageView.

In this case. You need to write some JS and use the setTimeout to meet the requirement.

Tag : customHtml , fire the setTimeout Trigger : allClick , use the css selector you provided.

I will push datalayer in the customHtml if I am doing it.

Here is the code example. It will push datalayer in 30 seconds after the user click the button

(If the trigger is set to click the button)

setTimeout(function() {
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    event : "some_event"
  });
}, 30000);

In this way you need to set a time to track if user reaches the time. Like this example, only user stays more than 30 seconds after click then they will be tracked.

It is not something like you can track how long the user listened the music before they leaved. It could be done but required a deeper understanding for the JS. Not really recommend for this stage.