Angularitics with HBS files? - javascript

I've attached Angular to my .hbs project so I could access the ease of use of using the angularitics attributes to attach to my links. However, the only links that appear to track something other than "pageview" (like my category and labels) are ones directing to a new tab with target="_blank"
In short, my angularitics (google analytics) events are firing, but they only pass an EVENT when I have target="_blank"
Is this something in handlebars? Or could some javascript somewhere else be catching the event before it fires off properly?
Again to be clear, angularitics is firing pageviews instead of events (and pageviews if it's an internal link).

It ends up the events were being passed through, but since the page was reloading, "preserve log" needed to be enabled so that I could actually see the events before new files and network calls refreshed.
So the answer is, preserve the network log to watch event traffic when changing pages.

Related

Monitor which javascript variable changes on a user action

I have a large existing web app with a lot of javascript that I didn't write.
On this web app, a user action is performed in the browser (clicking on a link).
I need to see which variable(s) change(s) on click.
Using the watch pane in sources in the dev tools is not effective, because there are thousands of variables and I need to find the one that changes. I do not want to view all variables, only the one that changes. The script is very large and complex, following the event listener might not be feasible.
If you use Google Chrome, you can use the devtools, go to the Sources panel. Then if you look at the right side, you will see a column with "Watch", "Call Stack", etc... Expand the "Event Listener Breakpoints" part, then the "Mouse" category, and tick the "Click" checkbox.
Now Chrome will break (start a debugging session) at the click listener. You can now go step by step to see all the variables modifications, and their values.

Will dataLayer.push() definitely send data to google when triggered on an anchor?

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.

When onsettings event get fired

The documentation as to when onsettings here is fired describes as following
Occurs when app settings are changed.
Does it mean this event is fired every time a control used on settings pane is changed? It seem to me this event is fired every time I hit Win+I to bring up the Settings charm. I have created some views on my page for Settings and when I change a value (e.g., for a toggle switch) then appropriate event is fired for that control. Can someone please clarify this.
That text looks rather like default boilerplate for an "onXXX" event, and it's definitely confusing, but the context of the samples should steer you in the right direction. "when app settings are requested" would be more accurate, IMHO.
The event fires when there's a request made for the Settings charm, and your code would need to set up the appropriate command on the Settings flyout. It's not going to save anything on your behalf, and in fact, the the reference here is a good overview of what you'd need to do to save the settings changes automatically - essentially leveraging onChange events of the various controls you're using inside of the flyouts.

How to find JavaScript run when an event is hooked up unobtrusively

I am working on a web page that contains check boxes that do some stuff when they are clicked, or changed. There is no explicit event binding in the HTML itself. I have literally no idea how the event binding has been done and no way to find what JavaScript is being run when the checkboxes are changed (other than the page uses jQuery in other places).
The JavaScript itself is spread out in several locations in the HTML itself, plus in a whole bunch of additional JavaScript files. This would make just sticking breakpoints everywhere in the JavaScript difficult.
Is there any way, using some debugging environment for example, to find out what JavaScript is run when I change the values of these checkboxes?
Go to scripts tab in google chrome developer tools and set an Event Listener Breakpoint to a change event (or click event, whatever they are using) and go click a checkbox. It will then stop execution right away and you may manually walk through the whole execution process, function by function.

Outbound link tracking - Google Analytics' _trackEvent() and Omniture's s.tl()

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.

Categories

Resources