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 a website. In this website i display diffrent movies and series. Now when you select a episode of a serie this episode gets opened on bs.to in chrome if you look at the website (https://bs.to/serie/One-Piece/6/4-jfdsf/de) you see the play-button in the middle of the screen. is it possible to trigger a click event on this button for example with postMessage(). I've tried to add an eventlistener to the window and also to fire a event but i allways get the DOMException Blocked a frame from accessing cross-origin frame.
Is there a work-around? or can i develop a programm whitch simulate clicks dosen't metter if a window is opened or not?
Thanks for suggestions
If bs.to listens for a message telling it to fire a click…
addEventListener('message', e => document.querySelector("button").click())
… then yes.
But there is no way for your site to make the user's browser trigger a click on a third party site without that sites explicit cooperation.
That would be a huge security problem (take, for example, a third party site that was your online banking service, and a series of clicks that would transfer all your money to a malicious site author's account).
Twitter has the following UI behaviour that I want to replicate:
a homepage https://twitter.com with an endless feed you can scroll down;
if you click on a tweet it opens up with a dedicated URL (e.g. https://twitter.com/TheTweetOfGod/status/635493904834412545);
this tweet appears to be an embedded page/section 'on top' of the original feed, which you can still see around the edges but shaded darker;
If you click off the embedded tweet element (i.e. on the shaded area) you revert to the original https://twitter.com feed at the same point (i.e. page has not refreshed).
Note that if the tweet URL is opened up in a fresh tab then the author's profile page forms the shaded backdrop instead of the main feed page. So the main feed backdrop is only inherited if the tweet page has been accessed from https://twitter.com.
In web design terms does this design approach have a formal name/definition that might help me identify a suitable solution? I'm assuming it has a server-side dimension.
There are three aspects to your question. Let's first dive into the technology needed to implement everything, and then briefly discuss how Twitter leverages that technology.
TL;DR? Twitter uses the history API combined with AJAX and DOM manipulation to work its magic.
The techniques, and a little bit of background
(a) Changing the URL without refreshing the page (2 and 4 on your list)
There is an API for that, implemented by modern browsers.
window.history.pushState(state, title, URL);
window.history.replaceState(state, title, URL);
window.addEventListener('popstate', (event) => { /* use event.state */ });
The first two functions allow you to simulate the user navigating to URL. The first adds an entry to the navigation history, while the second replaces the current entry. This impacts what will happen when users use the back and forward buttons in their browser.
When users navigate back, or you simulate this using history.back(), the popstate event is fired and the state that you passed into pushState can be accessed via event.sate. The state can be any object, so this is useful to store, say, the title of the page (to update the document.title), the scroll position, or whatever else you want.
(b) Loading content directly
Because the entry is saved in the browsing history, it is possible that users visit this URL directly after having closed the tab or even their browser. They may also share the URL and have others visit it directly. In those cases, there will be no popstate event, but simply a request to your web server for the URL you passed to pushState. The URL must hence be meaningful to the server.
Twitter apparently loads the poster profile as a backdrop in this case. It depends on your use case what you want the page to look like. Anything goes!
(c) Loading content asynchronously (3 on your list)
Back to (a) for a bit. Twitter not only changes the URL, but also loads the tweet, meta data of that tweet and replies to it. This is then displayed in a modal popup.
Again, there is an API1 to load content asynchronously: AJAX. In particular, the XMLHttpRequest object and its functions are of interest. This can be used to make requests to the server and fetch content without needing the page to reload completely.
It is worth mentioning that a new API is being developed: the Fetch API. At the time of writing, there is basic support in all modern major browsers, but it is still somewhat under development.
After having fetched the content, it can be displayed on the page in any which way you like. JavaScript can be used to create, delete and modify elements in the DOM at will.
An example from your question: Twitter
Now that all techniques are on the table, let's summarize what Twitter does.
When a user clicks a tweet in their feed.
Load tweet meta data and replies (as described under (c)).
Create a backdrop and modal and populate them with the loaded content.
This uses standard techniques: create, delete and modify page elements.
Update the URL (as described under (a)) to enable easy sharing, amongst others.
When a user dismisses the modal.
Delete the modal and backdrop.
Update the URL (as described under (a)).
When a user directly visits the URL to a specific tweet.
Let the server respond with the profile page of the tweet author, with the tweet details loaded in a modal on top of it. Thus, no JavaScript is required at all. Of course, the modal can be dismissed just like in the previously described use case.
Implementing this on your own web site
You correctly identified that there are both client side and server side dimensions to this technique. The beauty of it is that, when implemented correctly, it is completely transparent to users. The only thing they will (not) notice is that there are fewer full page loads.
The references sprinkled throughout this answer should provide good starting points for you!
Final notes
All of this is sometimes also used to create smooth transitions between pages of the same site. In those cases, full pages are loaded asynchronously (as per (c)) and then a smooth transition, usually involving animations, is performed. There are many, many, many, many examples, tutorials and libraries for this. You may want to search for PJAX to learn and find more.
__________
1Not really a single API maybe, but an approach or mindset. See the MDN reference for more details.
I think that what is happening in Twitter is that the popup tweet loads the same content as the tweet in its own unique page; not that the modal has an unique URL.
If you use Angular, you can inject the same content into html modal templates or into standalone pages using route provider, and you could link from the modal content to the standalone page using the ID of the specific data to load that content.
EDITED TO ADD:
Here is the source code of a tweet in a stream of tweets, before it pops up as a modal:
<div class="js-tweet-text-container">
<p class="TweetTextSize TweetTextSize--normal js-tweet-text tweet-text" lang="en" data-aria-label-part="0">
Does anyone remember a 1990s TV show about a folklore prof investigating urban legends, shown on weird night on channel 4 <s>#</s><b>folklorethursday</b></p>
</div>
Here is the URL of the tweet when it is shown as a modal in front of the twitter feed: https://twitter.com/vogelbeere/status/887996116549107713
There are so many event listeners on the tag that it's hard to see which one is the link to the tweet.
I have some IFRAMEs on my pages for external services -- AddThis, YouTube, and a JWPlayer-based custom video solution. I want to use GTM to track clicks and responses in those IFRAMEs (particularly 'play' events on the video) but the cross-domain policy prevents that. How do I make that work -- and how do I get it to work in GTM?
It took me a while to figure it out, but basically:
Create a GTM container and add the GTM codeblock to pages on your
site.
Create a ‘Tag’ to be your event listener.
Create two ‘Triggers’: one for which pages to listen for the event, and one that fires when your event happens.
Create one or more ‘Variables’ to store the
info from your event listener ‘Tag’
Create another ‘Tag’ to take the info you stored in the ‘Variables’ and pass it to Google Analytics.
Go into the Google Analytics console and watch the events come in.
I wrote up a more complete, long-form guide at
http://ieg.wnet.org/blog/using-google-tag-manager-for-custom-event-tracking/
I want to calculate time consumed in redirecting from 1 webpage to another webpage.
For Example:
1) I am using Facebook in Google Chrome browser.
I have shared 1 link on my Facebook profile like below:
http://www.webdeveloper.com/
(It's not only Facebook. It can be any domain having link to another domain).
2) When I click on this link from my Facebook profile, then this website will open in new tab.
3) I want to calculate time difference in miliseconds or microseconds between below two events:
First Event: Time of clicking link "http://www.webdeveloper.com/" from my Facebook profile.
Second Event: Time of completely loading webpage of "http://www.webdeveloper.com/".
Thank you in advance.
Unless you load the linked page yourself into a frame or with xmlhhtp request, your facebook page does not have control of another page. In other words, as soon as the user clicks the link you have no control and it runs separately. If you use a frame or load the page ajax style with javascript into an object, it's not going to give you the same kind of timing. So this is basically a pointless excercise as you can't do it. You could potentially setup your own browser with whatever analyzer so it will give you timings but you can't set up any code that would time it for visitors, for the aforementioned reason. If it was possible to do such things then this code could also manipulate the linked to page and take over it. With such lax security you couldn't trust any link you click.