Adobe analytics with vue js adding external script - vue.js

Im struggling to add adobe analytics external scripts to my Vue js project. The client uses Adobe analytics and im battling to add it to the project without the project complaining.
The external adobe script looks like the following:
//assets.adobedtm.com/file.min.js with async
Then it is required that you end it by adding the following just before the closing body tag:
<script type="text/javascript">_satellite.pageBottom();</script>
When the project starts it complains in console that $ is not defined because it is defined in webpack when i start the project and im guessing its not finding the alias.
This is the error:
VM29714:3 Uncaught ReferenceError: $ is not defined
Then further down it complains that it doesnt know what _satellite is:
login:54 Uncaught ReferenceError: _satellite is not defined
I just need the scripts and satellite close to be added to the project, the rest will work once these are added.
Ive tried added the scripts by injecting them into the head tag on runtime but that also doesnt work.

If you are implementing Adobe DTM, you cannot inject the header script dynamically. It must be placed directly on the page without async or deferred attributes.
If you are implementing Adobe Launch, you can inject the header script dynamically and asynchronously. And if you do this, you do not include the footer (_satellite.pageBottom()) code.
Your script example isn't explicit, but the .min portion implies you are using Adobe Launch.
VM29714:3 Uncaught ReferenceError: $ is not defined
This is not directly related to either Adobe DTM or Launch. You may possibly have some other script or code block deployed inside the DTM or Launch interface that references $, but that's a separate issue to work out. Yes, it may be coming from a DTM or Launch script according to the js console, but keep in mind that DTM/Launch is a tag manager. It hosts and deploys other tags/scripts. So you need to do some digging to see which tag/script from which Rule references it. Start by looking at the stack trace to find out where it's coming from.

Related

vue-google-charts error n.load is not a function

I'm using the vue-google-charts package (https://www.npmjs.com/package/vue-google-charts) to display google charts in my application (vuejs2.x) and until now it worked perfectly fine.
But now i get the following error:
Uncaught (in promise) TypeError: n.load is not a function
at vue-google-charts.common.js:1
at new Promise (<anonymous>)
at vue-google-charts.common.js:1
and in my code the following messages shows up:
I read in several articles that i can create a file vendor.d.ts and put the following inside:
declare module 'vue-google-charts';
I created this file and placed it in the "src" folder but it still doesn't work. The problem is, that when I test it locally the application works perfect, all graphs are displayed etc. but as soon as I deploy the application to firebase the graphs don't work anymore.
I also read that the problem can be solved by put the following setting in the tsconfig.json file:
"noImplicitAny": false
But I don't have a tsconfig.json file I only have package.json and vue.config.js. so don't know where to put this setting.
Thanks for your help
I couldn't find any answer to this problem but I figured out that this problem only exists in the index.vue page. If I use another page the problem vanishes.
So i created a second page with the graph inside and redirected the index-site to the second page with the graphs.
I know it doesn't answer the problem but it is a workaround I can live with.

ReferenceError: raygunUtilityFactory is not defined

I am trying to implement raygun for a react-native app. I am running into problems with jest and I am not sure of the best approach given the window does not exist. In my package.json I have already added the following:
"globals": {
"window": {}
}
I get the following error though and I am unable to resolve it as of yet:
ReferenceError: raygunUtilityFactory is not defined
This is a very basic implementation as per the docs:
https://raygun.com/docs/languages/javascript#reactnative
I presume this is something with jest but having searched on github, here and google I still have not been able to resolve this.
Raygun4JS does not currently work correctly in a non-browser environment. Your best bet would be to not include the Raygun4JS code inside of your test environment (which is what we do at Raygun) but that is a bit more complicated using the UMD module from NPM (we use the snippet approach to inject it dynamically).
I think the problem stems from window not being considered the global object in Jest vs the browser, we have an indirect call to the window object to call the raygunUtilityFactory. Are you using the jsdom test environment? We also have the same window definition in our jestconfig.json and export some variables onto window in our setupframework.js file that are accessed indirectly through the global object and it appears to work correctly.

Angular 5 / Sentry error reporting shows error source reference in bundled js

I have applied Sentry.io error reporting in an Angular 5 project using Raven-js. Everything works fine and I get the error reports.
The problem is that the reported error location is provided using the bundle.js file references which is very hard to find in the actual project.
For e.g.
TypeError: Cannot read property 'id' of undefined
at e.logOffline (/mem/main.f858f9330b4c0ee7c38e.bundle.js:1:26440)
at e.phoneOffline (/mem/main.f858f9330b4c0ee7c38e.bundle.js:1:25883)
at t.handleEvent_12 (/mem/main.f858f9330b4c0ee7c38e.bundle.js:1:488537)
at HTMLAnchorElement.<anonymous> (/mem/vendor.f8004cbd231f87b295e2.bundle.js:1:311586)
at HTMLAnchorElement.r (/mem/vendor.f8004cbd231f87b295e2.bundle.js:1:666890)
Now this reference is not useful to locate the error.
Is there something that I missed in the sentry setup or this is how it actually shows the error?
Seems like Sentry can't find your source maps. If your site is public, Sentry will try to get the spurce maps automatically. Otherwise you can upload the source maps yourself.
https://docs.sentry.io/clients/javascript/sourcemaps/
The usage of source maps works out of the box for a deployed app. Sentry tries to fetch the source maps through the public internet and thus cannot fetch them on localhost.
If your source maps aren't public (e.g. out of security concerns), then you need to upload them manually like described here: https://docs.sentry.io/platforms/javascript/sourcemaps/availability/#uploading-source-maps-to-sentry .

Agile Central example cumulative flow diagram not rendering

After checking out the source from: https://github.com/RallyApps/app-catalog
I attempted to build the Portfolio Item cumulative flow diagram src/apps/charts/rpm/cfd locally using
rally-app-builder build which shows no errors
Launching App-debug.html allows me to input the relevant settings, but once I click 'save', nothing renders and there are no errors logged to the JS console either, making debugging challenging.
I attempted to copy the build output into a custom html app inside rally, which displayed the same behaviour.
Is this a bug with the example app? Or have I missed some crucial configuration step?
EDIT:
Extra info - I tried running via the rally-app-builder to no avail (think it's related to this issue: https://github.com/RallyApps/rally-app-builder/issues/45). I attempted to flatten the structure and the result of that was a cross-origin request error.
Running from file resulted in a 403 for the SDK
Sorry about that- that Rally App Builder issue is definitely the problem you're running into. Just as a test I downloaded the built html output for that app from the app catalog release: https://github.com/RallyApps/app-catalog/releases/download/2.1/2.1.zip
It worked when installed on a custom html app on my dashboard once I edited the app settings and configured a portfolio item.
If you're looking to tweak this app from source you'll probably have to copy all those files referenced in config.json that live in parent directories into the main app directory and fix the paths in config.json. Then you should be able to build and run the app normally using Rally App Builder.
It seems this app was really not designed to be run externally, so I added a little code to ease the issues I ran into:
In PortfolioChartAppBase.js, _loadSavedPortfolioItem function:
scope: this,
fetch: ['Name', 'ObjectID'] //this is new
And I added some default settings as a top level config object in CumulativeFlowChartApp.js (since the code to force into settings mode doesn't seem to work correctly when running externally):
config: {
defaultSettings: {
portfolioItemPicker: '/portfolioitem/feature/52725935318', //insert a valid oid here
startDate: 'actualstartdate',
endDate: 'actualenddate',
chartAggregationType: 'storycount'
}
},

Adobe Air Application-sandbox content cannot access this feature

Error #3207: Application-sandbox content cannot access this feature.: SecurityError: Error #3207: Application-sandbox content cannot access this feature.
at flash.system::Security$/allowDomain()
Hi all,
I have an air project that I am trying to run via a terminal using run-air command. If I run it in flash builder it seems to run with no errors, but after using a makefile to build the project and then run the code via run-air in the terminal I get the above error. Before I Was getting the same error and put a try catch around the code, however, I can't do that in this part of the code and don't want to put a try catch everywhere I get this error. I would rather just fix it. It seems to get called whenever my code is trying to access a class via a swc or import.
Anyone have suggestions?
I have tried:
Security.allowDomain("*");
which through the same error, so I put a try catch around it and now it moves on and I Get the above error when I Try to load a swc.
Also we are adding the src folder to the class that is throwing the error above via the compiler properties (we are doing unit tests) and using a makefile to build the project. If we didn't put it in compiler properties the class never seems to get picked up.