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.
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 am working on the extension that needs to update page texts after page is loaded. I use window.onload in "content_script".
As I need to test my changes a lot I decided to create a little page with a few paragraphs of text and put it in my web server. But when this page loads - extension's window.onload doesn't trigger, wheres on any other internet page it works properly.
I started investigation and found out, that this is because of the page loading speed. So basically page loads faster than extension code.
It was verified by adding background image on the body linked to the external site. Like this:
body
{
background: url(http://colourunity.com/img/2013/07/autumn-wallpaper-computer-14172-hd-widescreen-wallpapers.jpg) no-repeat;
}
So the page's loading speed slows down and extension has enough time to load in and window.onload triggers.
Of course I don't worry about extension work, because it is too rare case when page loads that fast.
But still - is there anyway to bypass this?
Thanks.
The window object of your content script is not the same as the one of your page. From the content script documentation:
It's worth noting what happens with JavaScript objects that are shared by the page and the extension - for example, the window.onload event. Each isolated world sees its own version of the object.
Therefore listening for this event in your content script won't work as you intent, since it's not the one you want.
It doesn't matter anyway: you can specify at which point your script is executed via the run_at option. For example, if you choose to run it at document_idle, then you're guaranteed it's executed after the window.onload event of your page.
In other words, you can simply stop using the window.onload event, and directly run the code you need.
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.
A customer's site we show in an iFrame is extremely slow (~7s).
We can only provide a JavaScript file the customer will include, but he won't do more than that.
Is it possible for me to hook to all events (forms submitted, links clicked) and display a nice loading animation until the page is fully loaded?
Or can I universally ajax-ify his site?
Once your page is unloaded and the other page starts loading, the code from the original page is no longer available or running so it can't be doing anything and the content from the original page has been cleared so it can't be showing anything.
In that same situation, the next page is in the process of being loaded and it's code is not yet running.
Thus, you cannot use normal page javascript to run something throughout the loading of a new page. To do something like this, you would either have to use frames with progress showing in one frame while content loading in another frame or perhaps use a browser plug-in.
You can know when a page is being unloaded with the beforeunload event, but as soon as the next page starts to load, any code assigned to this will no longer be running and the current document will have been cleared.
I need to have a way or tools to test the actual perceived rendering time for the browser to render the entire page to users. Any suggestions?
The reason I ask is because firbug and Yslow only reports the DomContentLoaded and OnLoad time.
For instance, my application reports 547ms (onLoad:621ms) for the contents. But the actual content is rendered around 3 seconds. I know so because I actually counted 1, 2, 3 slowly from the moment I hit enter in the url field of the browser to the moment when content appears in front of my eyes. So I know 547ms nor 621ms DOES NOT represents the actual time it takes for the page to load.
Not sure if this helps. But my application
renders json data on the server side, save the data as a javascript variable along with the rest of the page's html before server returns the entire html to browser
page loads Jquery 1.5 and Jquery template
jquery code grabs the json data from the variable defined at step 1
use jquery template to render the page.
Technically, no Ajax involved here and images on the page are all cached. I don't see firebug downloads any of them.
[Edit]
What i'm trying to figure out is after the firebug reported onLoad time which in my case is 621ms, to the time the page is completed and loaded in my eyes (which is at least 3 seconds), what happened to the 2.4s in between? What took place there? Browser is doing something? Something is blocking? Network? what is it?
Google Chrome has excellent auditing built in. Your results will be skewed because it's one of the fastest browsers right now, but it will give you exact measurements of how long it takes for Chrome to render. =)