I have a Hype document that sends analytics to a dashboard when a button is clicked.
This is the code that tags the butto (along with some other code in the Head HTML):
Now I want to send analytics when a scene is loaded, or an element is viewed.
Not sure whether there's a Javascript function that does the same thing as the screen shot above, or if I make an empty rectangle and put something like this in the inner HTML:
If you test your project, and then view the source, you should see the data attribute on the element. But, without JavaScript listening for button clicks, how would the Data Attribute work?
Basically, JavaScript is used to track events, such as a click. Once a specific element is clicked, the JavaScript reports back to the Matomo software.
Perhaps I'm reading this wrong (given other folks comments they are reading it differently), but it sounds like the question you are asking is how Hype adds the attribute or how to programmatically generate that code and insert it into the DOM?
Attributes like this are applied via the setAttribute DOM call. It would be used like:
You'd need to get the element ahead of time (say via a document.getElementById() call or made on the fly via document.createElement('div')).
The things to look out for whether using Hype's Additional HTML Attributes, your own code, or even inner HTML in a Hype element is how ad systems may find and use the attributes. Timing is often important. I've seen systems try various times to read:
Reading the HTML source (usually on the server, before being rendered/sent to a client). Since Hype stores all layout information in relatively opaque JSON data, ad systems that rely on reading .html files won't find the attributes at all. Sometimes ad systems provide dynamic APIs as workarounds, otherwise sometimes you need to put fake elements in your HTML and move them around via dynamic code later.
Reading the DOM on page load - this is one of the more common ways ad systems may scan though the document. The problem is that Hype usually constructs the page after the ad code scans. As with before, often ad systems have APIs you can call to scan again or identify specific elements. You can also do stuff like inline the Hype loader and runtime and usually that makes it early enough.
Monitoring the DOM for changes - this would work best if whenever you added attributes the ad system knew about it would suck them in. However this is computationally expensive so I don't think ad systems typically do this . Instead you usually need to make ad API calls to alert them there's a new element of importance.