1) Add gtag above the Google Tag Manager code sample
window.dataLayer = window.dataLayer || ;
Add the above above the Google Tag Manager script implementation within your application's source code. This is a standard way to enable gtag (GA4) style of pushing events to Google Tag Manager.
This will ensure that the Inline Manual Player can pass the instructions via standard gtag to Google Tag Manager (GTM).
2) Setup Variables in GTM
Add four new User-Defined Variables which are of a Type Data Layer Variable (apply your own event titles as you like)
Inline Manual Step Index - eventModel.step_index
Inline Manual Step Title - eventModel.step_title
Inline Manual Topic Id - eventModel.topic_id
Inline Manual Topic Title - eventModel.topic_title
GTM will now recognise the variables sent as part of the events from Inline Manual.
3) Add three Custom Event Triggers
Inline Manual Step Show - Event name: Step Show
Inline Manual Topic End - Event name: Topic End
Inline Manual Topic Start - Event name: Topic Start
4) Add two Tags to trigger GA events
Inline Manual Step Show
Inline Manual Topic Start/End
Make sure you link the right GA4 property in the above.
This setup will make the Inline Manual Player pass the events to Google Tag Manager datalayer which then passes them to Google Analytics 4. You can then see those events by using the regular tools such as GTM Tag Assistant and Analytics live debugView.
Google Tag Manager will be now receiving events from Inline Manual Player, which you can then pass to other tags, not just Google Analytics.