Using focus out events and mutation observers in Adobe Dtm - adobe-analytics

I see that there is only a limited amount of event types we can use in the Adobe DTM user interface . How can we use the above focus out and mutation observers to Capture user interactions?

The counterpart to "focus" is "blur", and it is available as an Event Type for Event Based Rules.
Mutation observers are not currently available in DTM, so you will need to write your own code for that. You can put it in a Page Load Rule as a Javascript / Third Party Tag, and have it trigger a Direct Call Rule.

Related

Is there a similar thing like EventFiringWebDriver to PlayWright automation?

My objective is to log all the interactions with the web elements in PlayWright automation. I need to capture the following interactions
Click/Submit
Select dropdown
Check Box
Text filling
Radio button
Toggle button
Something like as shown here https://blog.testproject.io/2018/06/04/event-listeners/
Hope it helps what I am trying to achieve, please do comment if further information is required.
Thanks.
Write wrapper functions over library functions to log desired details
Write wrapper functions over each UI action and which will write the specific action performed detail on an generally external file for later reference on post execution.
On the script level these wrapper functions will be called and all library functions will be called indirectly.
This is the standard advise to keep it DRY as there will be hardly 10-15 primary functions covering most of the UI actions and will encapsulate all the required logging & reporting functionality in one place.

Setting products with Dynamic Tag Management?

I can set events through pageload rules but how do I set s.products? I'm trying to pass along product info with the purchase events but I don't see how to set this through DTM?
DTM currently does not offer a built-in form field for s.products. However, you can add it yourself.
Within the rule, go to Adobe Analytics > Custom Page Code and click on the Open Editor button.
Within this text box, you can write arbitrary javascript, including setting any Adobe Analytics variable.
If you need to reference a data element, you can use _satellite.getVar('data element name')

What are the ways to track inactivity with adobe dtm?

I'm new to Adobe DTM, after checking all Adobe DTM events it doesn't have a method to check for inactivity. Have anyone done this? How to do this? Thanks.
Well, I'm gonna answer my question based on the help from #CrayonViolent.
Create a Page Load Rule
Under Conditions, Trigger rule at Bottom of Page, it provides ample time for the page to load the elements before it runs the rule
Under Javascript / Third Party Tags, I added my javascript to detect whether the input field value has changed, if it does, delays for 15 seconds then run _satellite.setVar('blahblah', 'toSomething') which allows me to use in the next step. Final step is _satellite.track('mydirectcallname'), to trigger the Direct Call Rule
Create a Direct Call Rule
Under Conditions, make sure String has the same value as in _satellite.track('mydirectcallname') (i.e. mydirectcallname)
Under Adobe Analytics, I set one of the eVar to use %blahblah%, which I defined in step 1.

what analytic tool can I use for tracking exactly what users click

Please advise what tool can I use to track what user is exactly clicking i.e. click-streams – to view the actual click-stream of each visitor.
I came across "rail stat" but it seems outdated (09'). I also saw "clicky" but am unsure if I can see click streams with it?
So what other analytic tool can I use to view click streams?
Every answer would be greatly appreciated!
You could try the "event tracking" part of google analytics which allows you to track interactions with your site (clicks etc etc) rather than just the normal per-page.
Here is a snippet from the Event Tracking docs:
Event Tracking Overview
Event Tracking is a method available in the ga.js tracking code that you can use to record user interaction with website elements, such as a Flash-driven menu system. This is accomplished by attaching the method call to the particular UI element you want to track. When used this way, all user activity on such elements is calculated and displayed as Events in the Analytics reporting interface. Additionally, pageview calculations are unaffected by user activity tracked using the Event Tracking method. Finally, Event Tracking employs an object-oriented model that you can use to collect and classify different types of interaction with your web page objects.
By contrast, tracking web page objects using the urchin.js tracking code requires virtual URL creation and provides no object hierarchy. With the legacy urchin.js code, user interaction with page objects is calculated and displayed as part of total page views to your site, and no distinction is made between actual and virtual pageviews.
With ga.js, you would commonly apply Event Tracking to:
Any Flash-driven element, like a
Flash website, or a Flash Movie player
Embedded AJAX page elements
Page gadgets
File downloads
Load times for data
Another option is Open Web Analytics, which includes an option to both record a user's DOM stream for later playback and to record a heat map.
OWA is a standalone PHP app that is able to monitor multiple domains. It is under active development with version 1.5 out any day now.
HTH

Trouble with react final form FieldArray, listeners and displaying data from api call outside of form

I want to trigger an API call to fetch some supplemental data and display it alongside my react final form. What's the best way to do this?
I've started by using OnChange from react-final-form-listeners to listen for a field change and make an API call, but I don't really know how to store this data somewhere and display it within the react-final-form framework. Using a functional component and a State hook, it would be relatively trivial, because I would just set the state of a variable and then display it somewhere in the same component. Is this a sign that I should be storing these kinds of things in redux? Can I use hooks instead?
I forked one of the examples and added what I am trying to do:
https://codesandbox.io/embed/react-final-form-field-arrays-k9pqm
You're talking a little too abstractly about your goal here, but sure, you could keep the loaded data in state with a useState() hook. If I were you, I'd want to debounce it, and keep track of whether or not the Promise from your API call was the Promise from the last call or not.

Resources