GetEmails collection script (from Retention.com) is not firing consistently through GTM - javascript

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.

Related

When pressing a button on a webpage loads a new URL in Google Chrome

At the following web address: https://www.sky.com/new-search/chernobyl?q=chernobyl is a button called Episodes. I have determined from Google Chrome developer tools, that this is represented by:
<button role="tab" type="button" id="tabs-id_2474-link-1" class="c-tabs__link" aria-selected="false" aria-controls="tabs-id_2474-article-1" data-test-id="episodes-tab-button">Episodes</button>
...I've also managed to find from the 'Sources' tab of dev tools that the Javascript for mouse clicks is webpack:///./src/builders/click.js?388e.
The effect of pressing the Episodes button is that the URL of the page changes from https://www.sky.com/new-search/chernobyl?q=chernobyl to https://www.sky.com/new-search/chernobyl/episodes/season-1/episode-0?q=chernobyl and the page changes to show episodes from the series and a synopsis for that episode.
The bit I am missing though, is now does the mouse click Javascript trigger the loading of this second URL? I need to be able to capture somehow the new URL, or even better the full source code for the second URL...
Any ideas?
Client-side applications can basically do whatever they want, in terms of navigation. There is no standard mechanism, outside of a normal link <a>.
What they're probably doing is updating the existing page, and updating the URL to retain the state. That is, when you click the button, their code goes off and fetches some data from the server, then creates elements on the page based on that data. The actual original HTML page (and context) stays the same, but it can be modified with fresh data. The URL can be updated with the History API.
If you know something about the web application you're trying to inspect, you can write code for it specifically. For example, if you know that the application always fetches data from https://api.example.com/some-data, then you can skip the whole web page ordeal and hit the API directly.
If you need a more generic solution, the only thing you can really do is run a whole browser engine, through Chromium Embedded Framework or similar. This allows the web application to run as it normally would. Then, on URL change, you can inspect the DOM with your own code.

Java script event to identify the UI is ready for user intraction

I am working on a web application and have pages which gets data asynchronously using ajax call during the page load. These calls does not block the user. When we inspect the page using developer tools (IE and Chrome) it seems that the timing to load the entire page takes more than 26s. Please see the image attached which shows the details of default.aspx. But even before loading the entire page, the user can interact with page.
I need to find a way to identify at which point, the user can interact with page, using some java script event api like DOMContentLoaded. But I am not sure which event is the right one which ensures the user can start interacting with the page even if it is loading data in background using ajax call. Any guidance is appreciated
.

Why is my add-on panelĀ“s content script no longer responding to port messages after changing contentUrl?

I am building a Firefox add-on using the addon-sdk.
The add-on has one button that displays a panel on click. The panel has a content script running it. Now, I need the panel to look different depending on the user's current tab and occasionally show an external url.
So, the main.js script tracks the current tab of the user and sends messages to the content script using panel.port.emit() and the content script changes the HTML of the panel to match whatever is needed.
However, as I mentioned, some times the panel is just showing an external url, so I need to reset it back to its original url. This is my code:
function panelListMode(currentTab, data){
panel.resize(350,300);
//This is the line causing the trouble
panel.contentURL = self.data.url("panel.html");
console.log("sending message");
panel.port.emit("generateList",data);
}
If I emit the message after changing the contentURL the content script does not seem to receive a thing. I now that specific line is the one causing the problem because if I comment it the content script receives the message.
Something tells me this is because the panel needs to load the DOM again and I need to wait until it is ready before the content script is able to do anything. But... aren't content scripts something apart from just included scripts?
As far as I am able to tell the panel has no "ready" event of sorts that I can listen to for emitting the message.
What am I missing?
Edit: After some experimentation I have been able to find some more. If I copy panel.html to the same directory as panel2.html and change my function so it goes:
function panelListMode(currentTab, data){
panel.resize(350,300);
//This is the line causing the trouble
panel.contentURL = self.data.url("panel2.html");
console.log("sending message");
panel.port.emit("generateList",data);
}
The problem is gone. I have experimented a bit and it seems that when I try to change the contentURL to the html that is already set in the panel the content script stops working all together.
This is some really odd behavior... have I encountered a bug?
As far as I am able to tell the panel has no "ready" event of sorts that I can listen to for emitting the message.
I think it does, at least internally it seems to but I'm not sure whether they're exposed.
But even if it doesn't you can simply fire your own port message from the content script once it has been attached and registered its own listeners. Upon receiving that message in the addon you can then resume using the port on that side.

synchronously javascript loading asynchronously

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.

Facebook Timeline Scroll Event that loads more content

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.

Categories

Resources