Develop Reference

Issue with Google Tag Manager implementation. "Uncaught TypeError: Wb.set is not a function"

Recently I started having Issues with the Google Tag Manager.
I can't track it to a Tag or a Trigger (activated and deactivated individually to check).
The error started occurring this week (no updates were made to the system or template). I noticed when testing the implementation of a new Tag in GTM. That shortly worked but then this error message started showing in the console. Removing the new Tag didn't change the situation and since the code worked for a while (some 30minutes) I don't expect a direct relationship between the new tag and the error.
All I have is the console in the frontend that shows the following error message:
Uncaught TypeError: Wb.set is not a function
The error stems from this file:
https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXXX
Wb is started as a Map just a few steps earlier:
Wb=new Map(Vb.h.F);
Wb.set("style",{ya:4});
The GTM Script is copied and pasted from the GTM-Admin without any change made to it and is included in the header.php file of the Wordpress template. I tried copying it again and replacing the script that was in the header.php previously but the result was the same.
If looking at the actual error message in the console helps, the issue can be seen on the following URL:
https://www.bindella.ch
Any help in solving this or at least pointer to where to go look for errors would be very much appreciated.
Thanks

Very interesting, and yes, you're right, the error in the minified code makes no sense:
Let's try something different. First, just export your GTM container (the workspace that is synced with prod/live) as a JSON file in Admin section.
Open the file, look for something like set("style" See if you can find that Wb. Well, don't expect it to be Wb. I guess GTM minifies the code. It may be some weird chat bot, or something like that. From there, you'll be able to find the tag or variable that causes the issue.
I didn't look too deep into it, but that part of code looks sophisticated enough to be a part of the core container code. Actually, we can check it right here, on SO cuz it uses GTM too, let's do that.
Yes, SO has identical code. Looks like it's indeed core GTM. Well, there's a tiny probability that when you built the prod library last time, GTM had an issue and it deployed an artefact.
Try making a new workspace, make a nonsensical change in it and publish it to production. See if it lets you publish. Then see if that fixes the issue.
Now, if it doesn't then the next thing I'd try is trying to re-importing the exported JSON, forcing GTM compare the import to what's there and find differences.
Now if that shows no issues, then I would make a brand new container, load the config in it and try replacing the gtm loading script to see if the error still happens. It sounds like you can do that. If you can't, look a plugin like redirector to redirect the request to a different container.
Still the error with the new container? How about if you load a completely empty container? Got any errors?
There's a very slim chance that your front-end deploys one of a few vars GTM uses too, thus conflicting with your GTM. But it's very unlikely. Why would you use something like google_tag_manager or google_tag_data in the global scope...
If nothing helps and only the empty container doesn't give errors, then... well, then make a list of all tags firing along that error and start disabling them one by one. Or use breakpoints to narrow it down to the tag/library that causes it.

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.

How to run js code pulled from server side in angularjs?

I am using Laravel as my back-end and Angularjs as my front-end for my website. I need to pull some js code (advertisement purposes, like Adsense) from server side and run it in Angularjs.
I got some ideas from https://www.ng-book.com/p/Security/ . First I use $sce to make the js code trusted so that angularjs can run it,
$scope.safeJsCode = $sce.trustAsJs($scope.unsafeJsCode);
then I use ng-load to eval() the safeJsCode
<script ng-load="run()"> </script>
$scode.run() = function()
{
eval($scope.safeJsCode.toString());
};
However, I was not able to run it. Can someone give me some ideas on how to solve this predicament? Thanks!

So if I understand correctly, you think that ng-load can call your 'run' function.
Empty script tag won't fire a 'load' event, so no wonder that it is not being executed.
If you really need to dynamically load some script and execute it you don't need no script tags-just as soon as you fetch script from the server and get safeJsCode, eval it.
Now I don't expect you to heed my advice, but instead of doing eval(), you should really think about a way how you can achieve with just data. In most cases this can be solved by just having your own smart code.
There are case which comes to mind- like a dashboard with customizable widgets, where people can write 3rd party widgets. Problem is, these never catch on and they are very prone to bugs and usually are sluggish.
If you trully need dynamicity though, you could try loading those script with https://github.com/systemjs/systemjs

Debugging Unknown provider in minified angular javascript

I'm having a hard time trying to pinpoint which, of the very many, methods I have in my angular app that would be causing the error:
Uncaught Error: [$injector:unpr] Unknown provider: nProvider <- n
This only happens once the javascript has been bundled & minified by ASP.Net.
I have ensured that all the controllers, and any other DI, is using the minification-safe method, I.E My controllers/service etc are using the method:
appControllers.controller('myCtrl', ['$scope', function($scope){
//......
}]);
I've gone through every JS file in our app - there are a lot... and can't find anything that violates this way of injecting dependencies - though there must be one somewhere...
Is there a better way to pinpoint which method could be causing this error?
Thanks

For anyone else struggling with this problem, I found an easier solution. If you pull open your developer console (on chrome) and add a breakpoint where angular throws the error:
Then, on the stack trace on the right, click on the first "invoke" you see. This will take you to the invoke function, where the first parameter is the function angular is trying to inject:
I then did a search through my code for a function that looked like that one (in this case grep "\.onload" -R public), and found 8 places to check.

For anybody reading this, using Angular 1.3
You can now use Angular's ng-strict-di check like this:
<div ng-app="some-angular-app" ng-strict-di>
...
</div>
This will give you an appropriate error message if you didn't load your dependencies using the array syntax.

I had the same problem and I found a solution that could be helpful for the rest. What I propose is basically what I saw in the comments and docs. If you are using Angular 1.3.0 or above, you can use this:
<html ng-app="myApp" ng-strict-di>
<body>
I can add: {{ 1 + 2 }}.
<script src="angular.js"></script>
</body>
</html>
In my case, I have everything within a file app.js so the only thing I need to do for finding my DI problems is to add this little code at the end:
angular.bootstrap(document, ['myApp'], {
strictDi: true
});
It's better documented in Angular Docs
I hope that helps. Good luck!

As mentioned in the comments, These are the steps I took to try and find my JS error.
If there is another, easier, solution, please feel free to post it and I may mark it as accepted.
Trying to debug minified code is a nightmare.
What I eventually did was copy my minified javascript, directly from the inspector in Chrome.
I then pasted the JS into http://www.jspretty.com/ - I had tried http://jsbeautifier.org/ but found their site froze with such large JS code.
Once it was 'pretty-fied' I created a test.js file in my solution and pasted the, now easier to read code, into it.
Quick step to comment out the #script tag in my _layout and add a link to the test.js file and I was ready to debug a now, far easier to read, chunk of Javascript.
It is still pretty awkward to traverse the call stack, though now you can see actual methods it makes it far less impossible.

Something that helped me solve this (finally!) was actually already in the angular docs! If you add the ng-strict-di attribute to your code wherever you define your ng-app, angular will throw a strict warning so you can more easily see what's going on in development mode. I wish that was the default!
See the argument list at the bottom of the ngApp docs.
https://docs.angularjs.org/api/ng/directive/ngApp

The way this works for me is the following:
1) have two test specification html files (unit test) minimized and plain
2) make sure the bundling of the files are in the same order as the plain spec file (JS script reference)
3) make sure to explicitly declare all dependencies (array or $inject declares see http://www.ozkary.com/2015/11/angularjs-minimized-file-unknown-provider.html)
When there is a mistake on the unit test (miminized reference) file, I can compare and make sure the reference of the files is in the correct order as the working file.
hope that help.

I had the similar issue and used lots of time to investigate and figured out it was the Chrome extension Batarang that was injecting the bad code and error in Angular looked exactly the same. It's really a pity it's so hard to find what exactly is causing the problem.

I had the similiar issue too. The solution is exacly the answer from ozkary point 3, that is to make sure to explicitly declare all dependencies including "resolve" part of your route.
Below is my code.
when('/contact/:id', {
controller: 'contactCtrl',
templateUrl: 'assets/partials/contact.html',
resolve: {
contact: ['ContactService', '$route', function(ContactService, $route) {
return ContactService.getContactDetail($route.current.params.id);
}]
}
})

For those who's bootstrapping their angularjs app.
angular.bootstrap(body, ['app'], { strictDi: true });
Don't forget to debug in non minified code and you should be able to figure out pretty quickly the malformed dependency injection.
The malformed injection is usually formatted like this :
...
.run([ function(ServiceInjected){
...
But should look more like this
...
.run(['ServiceInjected', function(ServiceInjected){
...
This is tested in angularjs 1.7.2

Now.js Uncaught TypeError: Object#<Object>

I downloaded the example project from Now.js http://nowjs.com/guide
and when I run it I get
Uncaught TypeError: Object # has no method 'distributeMessage'
after attempting to send a message.
Ideas?

Turns out it was an issue with the PaaS not supporting websockets. Solution was just to explicitly disable them, via something like the following:
nowjs.initialize(server, {socketio: {transports: ['xhr-polling', 'jsonp-polling', 'htmlfile']}});
(resolved in #nowjs IRC)

It's hard for us to know with so little information. If you post your code, we are more likely to know what's going on.
Looking at the hello world demo on the nowjs.com site, it looks like maybe you don't have the helloworld_server.js file included in your page because that's where the distributeMessage() function is defined.
In the demo files here, helloworld.html has this line:
<script src="http://localhost:8080/nowjs/now.js"></script>
But, the demo tgz file doesn't include that. You are probably missing now.js in an appropriate path.