How to determine the line of javascript code which changes the url? - javascript

I have an existing site with a lot of javascript included. My javascript is adding a query string parameter (using history.replaceState) but right after the adding, it gets removed. How can I find the line of javascript who is removing my query string parameter? (I've been trying to place breakpoints in the Chrome dev tools on certain method calls but no luck so far.)
There is no real network navigation happening here, all changes come from javascript and angularjs.

With given information I can only say that its probably a redirection that must be removing your query parameter. Try enabling preserve network logs and then track the network calls to see if there are any redirections happening.

Following steps solved my problem:
First I've hijacked the pushState and replaceState methods to see when they are triggered. Everywhere where expected they were triggered. No other known calls are made. The catch is in the AngularJS $location component. It checks what happens onUrlChange and removes data which is no hash and is different from the baseUrl (as far as i can understand from checking briefly)

Related

what does utag.DB mean?

I am stumped on figuring out what this means..
utag.DB
I am seeing it in a web page via the console. And I'm trying to figure out what it means. Any pointers are useful.
utag.db is a Tealium function for debugging. It is similar to console.log(which is non standard). It is enabled via a cookie that's set.
Caught you!!
You are curious about utag means you have implemented or trying to implement Tealium data layer in your portal.
Basically utag.db is used to debug tealium functionalities related to utag files. As rightly mentioned by #webanalyticsdood, it should be used instead of non standard console.log
That's fine but how do I and why should I use it?
Simple, set utag cookie to true in your developer console using following command
document.cookie="utagdb=true";
Let's try with following command,
utag.data
Whatever data you are passing on to tealium will be found inside utag.data. If you can't read your data based on conditional events, it won't be sent to Teamium, better go back and correct your code. Let's try another one.
utag.id
it will return id you've set for synching with tealium,
You can explore more similar stuff inside utag.js
PS: would suggest you to add tealium tag in your question.

Passing a location.search parameter to a Jasmine (Karma) test

I have a javascript file that uses location.search for some logic. I want to test it using Karma. When I simply set the location (window.location.search = 'param=value' in the test), Karma complains I'm doing a full page reload. How do I pass a search parameter to my test?
Without seeing some code it's a little tricky to know what you exactly want, however it sounds like you want some sort of fixture/mock capability added to your tests. If you check out this other answer to a very similar problem you will see that it tells you to keep the test as a "unit".
Similar post with Answer
What this means is that we're not really concerned with testing the Window object, we'll assume Chrome or Firefox manufacturers will do this just fine for us. In your test you will be able to check and respond to your mock object and investigate that according to your logic.
When running in live code - as shown - the final step of actually handing over the location is dealt with by the browser.
In other words you are just checking your location setting logic and no other functionality. I hope this can work for you.

Dealing with Ghostery surrogates

Ghostery implements mock scripts (surrogates) so that pages don't fail on logic expecting tracking code.
In my case I had to write code that tracks asset and outbound clicks. The usual way to do that would be to check if the tracking code is loaded (in my case for _gat exposed by ga.js) but with surrogates this check would pass.
For some use cases that's fine and expected but we are dealing with links here. To ensure that the link is actually logged to GA I pushed a function to _gaq which (given that ga.js is loaded properly) would be executed.
With Ghostery that's not the case. I got links that would not trigger as the function with window.location.href = url would not be executed.
When I looked at the surrogate I found out it can change the location for me but I would have to do _gaq.push(['_link', url]).
I posted an issue and got a response that developers shouldn't bind functionality to third-party scripts. I get that and that's why before doing so I checked if _gat exists.
In the end I had to make a special case for Ghostery and attach their bizzare push to have links working with it.
You can check out the full implementation in this gist. If you want to reuse it and have compatibility with IE8 make sure to include a polyfill for String.trim().
How should I write custom tracking logic that does not rely in any way on the tracking code?
Using timeout for changing the url is out of the question as it would potentially corrupt hits on slow connections.
Also, poking the _gat object is not a reliable way as it's bad to rely on third-party scripts.
Web browsers are currently building a feature that will solve this problem:
https://developer.mozilla.org/en-US/docs/Web/API/navigator.sendBeacon
This won't widely implemented for a couple of months so stay tuned. For now, just add a setTimeout(function(){location.href=url}, 100) to catch errors and still have the link work.

JavaScript: get and set variables in window.location.hash?

Does anyone have a good solution for getting and setting variables in window.location.hash?
Take a URL that looks like this:
domain.com/#q=1&s=2
What I'd like is an unstressful way - JavaScript or jQuery - to check the values of q and s when the page loads, and change them following events on the page.
I have found some code for getting hash variables, but nothing sensible for setting them.
Am I missing something really obvious, or do I need to roll my own solution (and release it!)?
Thanks.
Haven't used it but there is jHash
jHash allows you to work with the
'location.hash' value in a similar
fashion to a server-side query string.
This library utilizes the HTML5
"onhashchange" event, but also
includes a fall back to still allow
the change notifications to work
properly in older web browsers.
jQuery BBQ can do this.
See also:
Get URL parameter with jQuery
Get QueryString values with jQuery
Edit as #gonchuki points out, jQuery.query can also do this.
JHash didn't work for me in that I wanted it to trigger the routes right away. I personally used routie instead.
It lets you do advanced routing just like jHash but will trigger on page load correctly.
Below will match example.com/#users/john
routie('users/:name', function(name) {
//name == 'bob';
});

Executing JavaScript on page load selectively

Mending a bug in our SAP BW web application, I need to call two javascript functions from the web framework library upon page load. The problem is that each of these functions reloads the page as a side-effect. In addition, I don't have access to modify these functions.
Any great ideas on how to execute a piece of code on "real" page load, then another piece of code on the subsequent load caused by this function, and then execute no code the third reload?
My best idea so far it to set a cookie on each go to determine what to run. I don't greatly love this solution. Anything better would be very welcome. And by the way, I do realize loading a page three times is absolutely ridiculous, but that's how we roll with SAP.
A cookie would work just fine. Or you could modify the query string each time with a "mode=x" or "load=x" parameter.
This would present a problem if the user tries to bookmark the final page, though. If that's an option, the cookie solution is fine. I would guess they need cookies enabled to get that far in the app anyway?
A cookie, or pass a query string parameter indicating which javascript function has been run. We had to do something along these lines to trip out a piece of our software. That's really the best I got.
Use a cookie or set a hidden field value. My vote would be for the field value.
This might be a cute case for using window.name, 'the property that survives page reloads'.

Categories

Resources