I'm using Hotjar tool (https://www.hotjar.com/)
I've put their snippet (which loads their code) on my page as instructed
I wonder if there is a onLoaded event, because I need to fire an event setting the state when the Hotjar is finally loaded (setting the state is what one has to do for SPA to tell Hotjar that the screen has changed)
I could create my checker function waiting until window.hj is defined, but I prefer to use the built-in one, if there is
Unfortunately the documentation is not great for developers (probably because they aim the companies without developers)
Related
I'm writing a Chrome extension using JavaScript and the extension's purpose is to manipulate the DOM on a website that uses React and dynamically loads different elements. Is there any way to detect that the page has fully rendered?
Using DOMContentLoaded, or even the Load, Event Handlers fail because they trigger right when the base HTML 'root' is structured. This extension is designed to create a task list based on incomplete assignments, which can take an unknown length of time to render fully.
Currently, the issue is worked around by using a custom promise that waits for 1500ms after window.onload before attempting to interact with the DOM. I have also used a 100ms Interval to search for specific components. Neither of these options seem to be the best. The 1500ms option isn't dynamic enough, sometimes 200ms may be enough while other times 1800ms is needed. As for the interval checking, I feel the cost/benefit ratio is too high and would prefer to avoid intervals like that if possible.
What are my options?
Thanks!
I'm trying to debug the integration between my app and Stripe's Elements component library. Everything works fine in sandbox mode, but we ran into a problem on production in the 3D Secure authentication process. This involves loading an iframe, into our app, that contains a form from the credit card's issuer (usually via a technology partner, like Arcot).
The form loads correctly and its buttons are working as expected, but the element (for a SMS one time code) is not behaving. Every time I click on the input, something is immediately pushing the focus back to the element of the iframe. This makes it impossible to type anything in, since by the time I touch a key, the input is not in focus. For reference, it is possible to change the input's value using document.getElementById('enterPIN').value = '123456';
I'm not sure if my app is triggering focus() calls (I don't think so) or if it is some part of the iframe code or even Stripe's. Is there a good way to monitor DOM events and do a stack trace for the trigger of each one?
I tried two tactics. Neither gave an obvious answer, but they did point my search in the right direction.
I opened the Event Listeners panel (in the Elements tab of my browser's developer tools) and removed everything I could find, but it seems that this doesn't actually change the behavior of the page- focus kept being stolen away. Luckily, I also noticed some listeners that were defined by the Material UI library.
I used monitorEvents() to get a few more details, but the src & target values were not much help and event.relatedTarget was always null.
In the end, I found this discussion and realized that my MUI Dialog component was stealing focus whenever I clicked on the iframe triggered by its content. This was easily fixed by adding the disableEnforceFocus attribute.
This may seem like a simple question, but it doesn't seem to be answered anywhere that i can find.
I am writing an onClick event handler that simply calls dataLayer.push() when an anchor is clicked.
Is dataLayer.push() a synchronous operation?
Will the GET request to google definitely be sent, even though the browser has unloaded the page it was requested from due to the link being followed?
Some browsers show the connection get cancelled, some show it success.
My question is if the computer is slow, is it possible for the page to get unloaded before the request is sent?
This is why i assume that google started using the eventCallback property to redirect the user after the link has been followed.
e.g.
https://developers.google.com/tag-manager/enhanced-ecommerce#product-clicks
This source code does not include the click handler, but implies that the onClick event should stop propogation and let the eventCallback function set document.location.
However, as soon as you cancel the event, all its information has gone.
This (in my opinion) is just the wrong way to do it.
e.g.
(CTRL or COMMAND) + Click opens a new tab on browsers. This will not work unless the onClick event handler allows the prorogation to continue.
Relying on eventCallback also means that if the google scrips didn't load for one of the many reasons it could (but is still unlikely), your links don't work. And your site is broken.
So this leaves the correct way to do it for the onClick event handler to allow the event to propagate and return true.
Which also means that dataLayer.push() would need return after the GET request was sent for any of this to work properly.
Code example:
NOTE: You will get mixed results in mixed environments.
Link
$(document).on('click', 'a', function(event) {
// Is dataLayer.push() guaranteed to fire a GET ?
// data set externally
dataLayer.push(data);
return true;
});
Is there anyone out there that can guarantee that the GET request will get fired to the google server?
Have the google developers forgotten something here?
EDIT: Updated title to be more relevant to the question.
datalayer.push does not send anything to Google. It pushes objects with key/value pairs to the datalayer array. This might contain an event which in turn fires a tag. Whether the tag is sent depends on the setup of the tag, not on the dataLayer.push.
As a consequence, when you write your own click handlers your are yourself responsible to make sure your tags are actually fired.
If you use the built-in click handler you can configure a delay to make sure your tag has time to fire before the link redirects:
Since link clicks usually cause the browser to load a new page and
interrupt any pending HTTP request, you have the option to add a small
delay to allow tags fired by Tag Manager to execute properly before
redirecting to the next page. Checking the “Wait For Tags” option will
delay opening of links until all tags have fired or the specified
timeout has elapsed, whichever comes first.
You should be able to mix both methods (push data on the click, but still use the "native" link click handler for the event).
You can also try to specify "beacon" as the transport method in your Google Analytics tags, on browsers that support this (which I think is only Chrome at the moment) GA will then use the navigator.sendBeacon interface, which sends the data even in case the page unloads.
You might think that Google's solution is not very elegant (but the simple delay has the advantage that it works for all tags, not just for GA), but they have not "forgotten" the problem.
Also solutions that combine GA hit callbacks with timeouts that redirects if the callback fails as proposed i.e. by Simo Ahava somewhere should be be doable with GTM, even if they are probably more cumbersome to implement in GA.
I want to write an Google Chrome extension to prevent a specific webpage to react on blur events.
I know how to do it for the javascript part : I inject some javascript in the page at runtime:"document_start" in order to overload the addEventListener method with my own function.
The problem is with flash parts on the page. Theses can use addEventListener(flash.events.Event.DEACTIVATE,deactivate_method_in_as3);
Of course I'd like to prevent the method call
So I have several questions :
Is it possible to set a security parameter somewhere to disallow Chrome to transmit focus related events to the application ?
Is it possible to modify 'on the fly' the swf file to remove or overide this handler (of course I have no control on that swf).
I also started to use the chrome.debugger.* and chrome.windows.* APIs because they can intercept events early. In that case I have a annoying message saying "tab is debugged by ..."
The swf has a similar handler for flash.events.Event.ACTIVATE so I can try to use it. But how to trigger it when the page is not focused ? (I tried to call focus() on it but it doesnt seems to work.
Any other idea welcome :)
Thanks for reading
We have a site that uses both Omniture and Google Analytics. Ideally, we want to report in both suites on clicks to outbound links.
I'd like to do this the "right way," i.e. overcoming the race condition that occurs when requesting a site and the tracking pixel at the same time. See: http://www.gwotricks.com/test/2009/07/tracking-outbound-links-right-way.html
I probably wouldn't use the "onclick" attribute, instead binding the trackEvent to the link's click event.
Omniture's external link tracking overcomes the condition by hooking a 500ms delay into s.tl():
www. webmetric.org/white_paper/link_tracking.pdf
Has anyone tried doing both on the same site? Ideally I'd like to call both tracking pixels with an appropriate amount of time before the page executes, but I'm not a big enough Omniture buff to really have gone in-depth with their code and hook trackEvent in before the delay.
Use JavaScript DOM (or if you use it, jQuery) to bind the events and utilize the new asynchronous Google Analytics tracking code and you should be set.
Sample codes for JavaScript event binders are everywhere if you don't want to use jQuery.
Done this several times, never interfered and never had to use a timer.