How to set up a Google Analytics experiment in Meteor - javascript

I set up Google Analytics tracking in meteor using the okgrow:analytics package. It works and I get the real time view of pages and events correctly. I want to run an A/B test to compare one of the features of my app. However, I ran into a few problems, mostly stemming from the fact that Meteor creates a SPA:
Google Analytics asks me to insert a script to track the experiment right after the opening head tag on the page I am trying to test. I can do that, but either I will have to put it on the head which is used among all the pages or inject dynamically which causes an error.
It seems that the Google Analytics script is not changing the page correctly. This is probably related to the fact that I can't insert the script into the head correctly, but I was thinking it might also be because it is a single page app and it seems like the script expects a more traditional website.
Also please note that I am using Flow Router.
I have searched without any luck. Does anyone know how to set this up correctly? Any suggestions or ideas would also be welcome.

Related

Using proxyman on React pages

very much a newbie from a developer perespective but will do my best to explain.
Essentially my small startup offers a solution whereby you can embed some simple HTML/JS snippet onto a page and then style by inheriting/customising with your own brand css etc. That snippet calls our service to display 3rd party infortmation but the the advantage is it's embedded in the customers site.
In most cases we demo it to potential clients by pasting it into an existing page on their site using proxyman's map local tool to override. However with the rise in react based sites this approach isn't working as the code is handled in the app so it simply just overrides when we refresh the page.
I'm wondering if there is a workaround or a tool out there that would stop the react experience from overriding the snippet we are dropping in via proxyman?
Any help appreciated!
I've looked into a couple chrome extensions that supress react but that hasn't worked and there's no docs on proxyman that address it

Should I use both gtag.js and GTM?

I´m a bit confused with Google Tag Manager and gtag.js. I have read a lot about it, but It´s not 100% clear to me what to use in my case.
Historically, we have been using gtag.js in our AngularJS webapp. We also used the library angularytics to track Google Ads conversions of purchases providing dynamically prices and leads directly from our website.
We have migrated to GTM to provide third party libraries from the GTM interface. This means that we have commented/removed gtag.js. Now, we track page analytics from GTM. However, obviously, our angularytics calls to Google Ads conversion tracking using gtag.js has stopped working.
At this poing I´m very confused with some questions:
I have read that I can add Google ads conversion tracking using GTM setting up conversions one by one. But, is it possible to set the price of each product which is totally dynamic? Or this case should I use gtag?
Does GTM provide a library to replace gtag functions? From the SEO optimazation point of view, I think would be interesting to avoid loading two libraries gtm and gtag.
Is there any problem that both libraries live together?
Well, you can think of GTM as a service where you can dynamically change the included tags in a website without direct access to the production source code. This is for example widely used for marketing agencies whose clients won't give away access to their servers. But it doesn't really have anything to do with Google Analytics at all as you can insert tags from any service provider (Social pixels, Intercom-like services...)
If you use Google Tag Manager to handle those tags you should remove the script call from your code. Otherwise it will be invoked twice

What am I doing wrong with Angular js manual bootstrap process?

I am using Angular 1.7.2 in a project i'm working on. (I prefer Angular 1.x)
I am doing the bootstrap process manually (because i'm adding scripts programmatically).
But, I am having 2 issues with the manual bootstrap process.
I have to use a setTimeout, else the bootstrap never works. And my problem with this is, the more files I add to my project, the longer i have to make the timeout.
Sometimes when I load my web page or refresh the site, not all my components are loaded. If i monitor the network traffic, i can sometimes see that the html files are not retrieved at all. And there are no errors in the console or anything.
It seems to me there must be something happening in the angular.boostrap process that is failing or getting stuck, but i can't figure it out.
For my first issue, why is the setTimeout required, is there a way to not need this?
Second, why does my site not load sometimes?
Could it be related to the OS locking the files temporarily because of all the source control, anti-virus, other services running on my computer? If so, how can i tell?
I put together a test project with relevant code here on github
I previously thought this was related to the routing, but it's not (see here), But it seems not related to angular-routing after all.
Any information would be much appreciated, this is driving me mad.
Update 1:
I have the code running here on github pages.
Best chance to replicate issue is to use google chrome, enter url, open dev tools (f12), then actually load url. Sometimes, the page doesn't load completely.
I have updated the test website to better reflect my project where I add scripts dynamically.
I think i found the solution thanks to a comment by igor
I moved my app.route.js file to be loaded before any of my angular component and directives and from what I can tell this solves my problem.
I will update the linked sample project too

JS Injection in Wordpress

I just upgraded to WP 4.3.1 on one of my websites. After upgrade (which seemed to go with no problems at all), I noticed that the layout of my pages has changed. There is a bar across the top of my page (not the admin bar) that wasn't there before. When I inspect the element there, I see a whole bunch of new code that is not being created by any of my plugins. And I cannot find the source of this injection in any of the provided php files. I have no idea where it is coming from, but I suspect that something in the WP 4.3.1 package has been compromised, or maybe there is a callout to a site somewhere that injects this code.
Anyway, this is a BIG problem and I don't know how to fix it.
I've copied the injected injected code below. It appears in all the pages on my site, right below the tag. Interestingly it can only be seen by "inspecting element" in the browser; page source does not reveal it (I've added some line breaks to make it more readable, but this is exactly what shows up in my page.
This same problem occurs on every site where I upgrade to WP 4.3.1. I hope someone can fix this problem IMMEDIATELY!!
Clearing cache, history & cookies doesn't resolve the problem. I can't tell where this injected code is coming from. Also, Google doesn't seem to be much help in telling me anything useful about http://kfc.i.illuminationes.com/snitch, which is one of the links that is being created.
Our site was infected, this is what we did to get rid of it
Thanks to this discussion which led me to a more detailed one
Connect via ssh to the server
Check the directory structure and find out recently created / modified directories
Check recently modified files for <script>. I found many files having JavaScript inserted which would connect to external sites.
As these calls were made on each page, I checked header.php in wp-content/themes/your-theme directory. (check the ones you are not using as well as that might be infected but may not show in radar)
You might also want to check footer.php for infection.
Re check file permissions on server as per WordPress Hardening guidelines on Codex
Delete unrequired ftp accounts in FileZilla (or its equivalent)
If you use any caching, delete entire cache.
You can verify if this worked using devtools network tab.

How to architect a HUD in a Google Chrome extension?

I am trying to make a Google Chrome extension using content script.
My goal is to have a display at the top of the page (which is already working on my own pages) that can interact with the page.
I need things which are very complicated to put together in an extension, due to security policies :
Using require.js on the extension (that works for now, using this Github repo)
Using a templating engine to describe my display : I need to add a lot of content to the page and I don't think writing HTML in javascript would be a good workflow.
For my current version I use jade with my server, but this is not possible with an extension. I think I need to use something like Angular.js or Backbone.js, but I can't make them work on the content script.
I need a lot of communication between my extension and the page : For example I need to detect almost constantly mouse moves
I need communication with my server using socket.io
Every bit of functionality of my extension have been developed and tried in a standalone web page, but now I need to integrate it in a real extension and I am really stuck
So due to these requirements, I am wondering what would be the right approach for building this : putting it all in an iFrame (would the server-side communication work? And how to communicate with the page ?), or a way to make a templating engine work nicely in there, or a solution I didn't think of?
Try this:
Develop the HUD part as a standalone page that the content script will include in an iframe. You should be able to use Angular.js etc. with this, but you will need local copies of as much as possible and you'll need appropriate entries in the manifest.json to get it working in the extension. See/create other questions for the details.
Have your content script inject the code to monitor mouse-moves, etc. into the target page. Have this code digest and summarize the data, so it's not spamming the system. Maybe message the summaries to the HUD page and/or content script five or six times a second.
After that, it should just be a matter of getting the pieces working, one at a time. Break it down to specific problems and ask a question on one specific problem at a time (If you can't find the answers in previous questions).
I'm pretty sure what you appear to want is do-able, but the details are too broad for a single Stack Overflow question.

Categories