I'm trying to isolate the Facebook JS/Ajax event that fires when more content is loaded.
This is - when you've been on the page for a certain amount of time and new posts show up. Or when you scroll to the bottom of the page and more posts are loaded.
I've tried going through every aspect of Chrome's developer tools to pinpoint that event but I'm just not getting anywhere. Facebook is very tricky in the way it names everything so that it's not human friendly.
The closest I'm getting is finding an event listener on line 20 of a file called PBlKb9_thnY.js (which may be named dynamically so be different for others), but I can't get any further than this.
Basically I want to identify the function that loads more content and then attach my own Javascript code to the end of it through an extension.
Related
I'm trying to run the collection (GetEmails) script on our site, aventure.vc. It's a website built using Webflow.
THE ISSUE: After moving the Retention script to GTM, we have received multiple emails from Retention informing us that no data has been collected for 3 or more days since it was was moved to GTM.
How can we get the script to fire consistently on our page through GTM?
This is the tag configuration using the code snippet provided to us for collection by Retention.com
https://imgur.com/TtrftmZ
The above tag is present in the live version of the container and is shown to be firing successfully every time when checked using the "preview" option in GTM.
Viewing the data on the Retention dashboard confirms that no data is being collected on most days, but on a few days a small number of entries are being collected.
This Indicates that the script is firing succesfully sometimes through GTM but it is not consistently firing for everyone that visits the site.
As a next step, on the aventure.vc website we used the "inspect" option on chrome, to view the site elements tab.
There we use the "ctrl-f" search option to manually look for the GetEmails collection script to see if it has been loaded into the site succesfully by GTM.
Upon doing this we observed that the GetEmails script does show up in the site elements sometimes,
but in most cases when the site is loaded, the script does not appear when we look for it manually.
TL;DR
The GetEmails script is firing everytime when put in the headers tag through webflow for our site aventure.vc,
but when trying to fire the same script through GTM, the script is missing from the site elements most of the time. Indicating the script does fire successfully sometimes.
How can we get the script to fire consistently on our page through GTM?
You need to do more debugging.
Make sure you've published your GTM workspace.
Make sure GTM loads the CHTML tag on the page whenever you test it.
Check the Network tab in the dev tools to see if the call is being sent to the vendor's endpoint.
Check your all pages trigger. Make sure that real pageview occurs. It will not fire on SPA history changes.
Finally, use the GTM preview debugger for your GTM logic debugging. It will give much more insight into what's happening.
I'm working on trying to find a defect in an angular application in the javascript being used to scroll a page. Person clicks link, page scrolls. Simple.
Alas, I have no idea what functions are actually being called when a user clicks the link and given this app consists of dozens and dozens (and dozens) of separate files, I'm having trouble finding what's going on.
I've read about using breakpoints and setting them up via the SOURCES tab in devtools. However, regardless of which of the many JS files I open in there, I never get any breakpoint options to check.
Is there a way to see what JS is getting fired with a particular event on the page within Chrome's Devtools?
Go to Sources tab.
Unfold Event Listener Breakpoints
Unfold Control, check scroll checkbox.
Scroll the page.
Javascript runtime will stop on event listener bound to page scroll and place will be showed in main window under Sources tab. If it's library file (in You case Angular files), right click on the file and Blackbox script. Scroll page again ;)
This is going to sound pretty generic but I don't know how else to ask this question.
I am using Selenium Webdriver (on python) to automate the download of some images. I can access a list of links to those images after a search. The full list of links is of known length, but gets loaded after successive scroll downs.
For example, after launching the search, I may know there are 210 results, but only 20 of them get loaded. Scrolling down multiple times will load the other ones. Workflow example:
Insert search details, click search button
Read total number of elements
Scroll down until the number of displayed elements is the same as the total
Download stuff
Close download page, go back to point 3.
The scroll down is really painful because the image download is on a different page, and closing the new page will reload the original search results without all the scroll-downs. Meaning I need to scroll again.
In order to speed up this process, I tried using PhantomJS and upping the vertical resolution of the page. However, this does NOT load all elements and the process fails, probably because the vertical resolution is enough to load all 20 elements and cannot trigger the scroll-function to load the others.
So I'm guessing there is some function that gets triggered when scrolling down. But I can't find it in the page source.
What I know is that it loads a <div id="loader"> that I see every time new items are getting fetched (and every time the page hangs because of connection problems).
My question n.1 is whether calling the function directly without scrolling, (i.e. d.execute_script("some_magic_function") would save some time compared to d.execute_script("window.scrollTo(0, 1000);")). Perhaps not, so I should just use the actual scrolling behavior as I'm doing now.
But if there could be an advantage, then my question n.2 is how I can find the function that triggered the loading of new elements (and of the <div id="loader">). I've tried looking for onscroll or just scroll but got nowhere.
I have a demo site built in Word Press.
In the head of the template I injected a script tag that loads a special script.
This script does a document.write to load another script from a server.
The script from the server in turn can do other document.write's to load up to as many as 10.
It is extremely important for these to load like this as these scripts make changes to the page before and thus it eliminates any visible change of content to the visitor.
Problem:
I am using a visitor experience recording service that loads my page inside an iframe and overlays it's mouse actions and heat maps.
When viewing the heat maps built in Flash, there is an odd behavior that is causing my script to load asynchronously I presume, cause the result is the page gets cleared because the second document.write is done after DOM ready and thus clears all content.
I am presuming that for some reason the page continues to load as my script runs it's series of document.write's in this particular case.
The only difference from mouse actions recordings that work fine is the presence of the Flash heat map.
I have Googled this to left and right and have found some similar reports some also reporting the added presence of a Flash but not found any clue that would point me towards a solution.
Has anyone see this behavior before and found a solution?
Please do not ask for links as I can only give you the link to the site that has no issues outside the recording service iframe to which I cannot give my credentials to.
Note: Asynchronous loading of my script would cause the default content to show for a second or two then be replaced. This would be visible to the visitor and thus unacceptable.
At first this might seem an odd question, but here's my problem. I'm developing a website that on window.load calculates the div positions as it has some dynamic scroll event highlighting (DOM Ready is the wrong choice for this as images and content isn't loaded yet and the calculate div positions are incorrect when the page has fully rendered.) The local assets run perfectly and are optimised for performance, but my problem is that the client wants social media embeds, for instance a twitter follow and facebook like button. Twitter seems to render pretty quickly, but Facebook takes so long and you can literally lag for about 20-30 seconds before the window.load event is ready, which means my navigation then lags and doesn't work properly. I don't know if it's even possible, but is there a way to determine when all local JavaScript files are loaded (these are included before the closing body tag).
Probably. All JavaScript in a page is executed in the order in which the browser encounters it. So when you add a <script> element as the last element inside the <body> element (i.e. at the bottom of the page), this code will run after all other script code has been executed. Also, at that time, the DOM will be finished (no further HTML to process) except for things that callbacks still might do (timers, onload-handlers).
So what you can try is to put a <script> element between your code and the code from Facebook. But that means your DOM won't be ready.
A better solution is probably to start loading the Facebook code in the background inside of onload. That means all the rest of the page is there and Facebook can take its time.