I am working with JS and I was looking to the GA's JS codes and I noticed something.
When I upload a page, in the console I see an image request like that;
https://www.google-analytics.com/collect?v=1&_v=j82&a=174999582&t=pageview&_s=1&dl=..
This is an image as the console said. I get this, Google inserts an image with some information about user behavior and collects the data from the request for the image. But when I look the page I can not find this "pixel", how can they send the request without including it in the page?
When you open the network tab in the developer tools you can see the Initiator of the request analytics.js:25. When you click on it, it will show you the code that adds a img tag with js var b=M.createElement("img");b.width=1;b.height=1;b.src=a.
The Browser loads the image even if it is not added to the DOM. That is why you can't find it there.
Related
One specific example is I see multiple versions of jQuery on my website. How do I know what's pulling in jQuery? I don't see it in my source code, so it must be another integration that's pulling it in.
It's not just jQuery though. I'd also like to track down where additional scripts are coming from.
I looked in web inspector and see multiple iterations of jQuery being loaded. I then searched the source code of my site for "jquery" in an attempt to find the source with no results.
In Chrome, you can open the devtools with control-shift-i (Windows). Go to the Network tab. Reload the page. In the table that appears in the devtools, click "Type" to sort by the type of request - look for script. From there, you can look through the different scripts to see which one(s) are the ones you're looking for, and click on the "Initiator" for that row to see what initiated the request for that script.
For example, for Stack Overflow, you'll see something like:
And clicking on that row takes you to the location in the HTML where there's a script tag:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
Open the network tab in the browser's dev tools, switch to the JS sub-tab, and look for requests for jQuery. Select one and look at the initiator column to see why it was requested.
I hope this question doesn't get closed. I am having a real issue with real traffic where bots or automatic browsers are hitting my site.
Is there any one who tried checking " no script" tag in detail. Will this "no script" tag can execute or pull a link that I have specified through a link element or an img src element if javascript is disabled.
Problem that I have here is this... I have visitors to my website and I am trying to track users which comes with browser but with javascript not enabled.
I added iframe, img, link tags inside "no script" tag to track users without javascript so that it will add a log for me when no-js users visit the page. But looks like "no script" doesn't get executed.
I can only add iframe or js elements and I can't add server side scripts to track these users.
I have tried adding no script tag in body element with a tag like this.
<noscript><img src=example.com/log></noscript>
<noscript><link src=example.com/log></noscript>
<noscript><iframe src=example.com/log></noscript>
This gets triggered when I run this from Mozilla with js disabled. But when real traffic is hitting my site, this no script tag doesn't get executed. basically I am trying to figure out the visitors who is coming with a browser enabled but somehow the no script tag is not getting executed.
Installing something server side is something that I can't do. I need to have some script like js script similar to google analytics to track this. I was thinking, if I add a log in no script tag that will get executed when no js users hit my site.
google analystics also recommends adding an img src for "non js" users in no-script tag. But when I tested with real traffic to my site, these users are not getting tracked.
Any help on this is much appreciated.
Thanks Lynn
Context
I realized that in Twitter, the profile page is displayed in different ways depending on how it is called:
By clicking the profile link in the menu, the DOM and the latest tweets are loaded, and the page is displayed in ~4 seconds. Each time.
Using the keyboard shortcut GP (or the link on the left), the page is displayed instantly.
Details
I noticed that the profile must have been recently displayed for GP instantly displays the page.
By closing and opening the browser, the profile must be displayed again for GP instantly displays the page.
Investigation
So at first I thought Twitter could use a serverside session variable to store data. Then I discovered a use of localStorage in the Twitter source code. I confess, DOM storage is unfamiliar to me and the Twitter JavaScript code is unreadable. So I don't sure they use localStorage to store the profile.
Question
Any hypothesis, infos or links about Twitter DOM storage / session storage?
This is an interesting question, so I went to twitter, and did some investigation myself.
Clicking on my profile name, the link is done with AJAX. I see my timeline getting downloaded. But, the page is already loaded in advance, so my information is also already downloaded.
By clicking on the link on the left, or with GP you just display the page already loaded (hidden, or in JavaScript object, so in memory). It will just display your profile already downloaded, and by AJAX download the feed (JSON).
The URL will change from https://twitter.com/#!/ to https://twitter.com/#!/wraldpyk (in my case).
When you click your profile in the menu (top right) you go to https://twitter.com/wraldpyk. This will re-open the page, and will download everything. Note you will get redirected to https://twitter.com/#!/wraldpyk, and meanwhile your timeline also gets downloaded (open FireBug and see the images and feeds getting downloaded)
As far as I can tell, no local storage (except in JavaScript, like everyone does) is done. All data is constantly downloaded on new page load.
Same thing happens when you type gh when on your profile. (And also with all other shortcuts)
When I generate a feed post using the FB.ui function I find that frequently the image I attach to the post displays as a vertical gray bar. On the other hand, if I generate my feed posts using the direct https://www.facebook.com/dialog/feed url the image works 100% of the time. If I provide the Facebook Debugger it detects it as a Photo and displays the image at the bottom. When I click the 'See exactly what our scraper sees for your URL' it says that the 'Document returned no data'. I assume this is because my image is not an open graph object? I'm very much at a loss here.
maybe try to add a random parameter after the image src like http://www.yourdomain.tld/yourimage.ext?randomnumber if Facebook tried to load that image when it didn't exists it will cache a 404 error. With a random parameter, it forces Facebook to refresh your picture.
You shouldn't provide a direct link to the image.
Utilize OpenGraph tags, e.g. share link yourwebsite.com?image=12. Use backend script to generate OG headers, namely: og:image, og:description (see http://developers.facebook.com/docs/opengraph/ for more information). This way every time someone shares the content you know what image is being displayed.
The issue was our server, it was becoming inaccessible from the outside intermittently. This was causing Facebook to cache the broken links.
I don't have an invite but it been used on TWIG.
It works as following:
You can select a parts to highlight, parts to blackout.
In the next step a screenshot of that is created (??) and you can preview what other browser information is transmitted.
So how does Google create that screenshot? does it send the complete modified DOM for server-side processing? or what other black magic is involved here?
The highlights and black outs are just HTML divs. The screenshot of the page is a canvas.
I used Chrome's developer tools to confirm this. It even works in Firefox and Internet Explorer, so it definitely isn't just a Chrome thing.
Here's a screenshot of developer tools with one of the highlight elements highlighted to show that it is a div:
There is one canvas:
When the dialog says this:
Please wait while we take a snapshot of the page so you can highlight
the relevant areas.
It seems to be rendering a screenshot of the page on the server (as there is a request in the Network tab and it has to do with a snapshot and the feedback according to the variables in the request URL) and then it places the screenshot over the page.
After you click on "Next," another dialog opens with all of the information and renders the final screenshot with your highlights and black outs in it.
I'm not sure how they did the "Highlighted Text" part though.
It could just send the entire DOM tree up to the server and have it rendered on the other end.
dont know the feature, but how your describing it;
its not a crossplatform feature and not in the specs. Your looking for drawWindow of the canvas element. They then base64/urlencode the canvas and send it to the server. Can imagine they back it with serverside black magic for IE6 support.. or they make google+ a html5 browser only thing..
It appears Google's updated feedback form screenshotter uses the browser's new display API to capture the screenshot. This allows it to get an accurate screenshot.
There's a cool library that does the same thing, if you want to make it yourself: FeedbackPlus