Pushing dynamic content using GTM element visibility trigger and data layer - javascript

Google Tag Manager's Element Visibility Trigger appears to be a rather excellent way of tracking whether an element has appeared within the viewport, using a class or ID.
The standard reporting appears to pull back data something like this
However what I would like to do is to be able to use the trigger to detect and report items in a dynamically created list. For instance the element would be triggered based on its class which is shared by all the other elements in the list, each element may be populated with specific data to be pulled from a database eg: name, product ID, price etc.
Currently this has been done using the Custom Event Trigger, but this reports all elements on the page whether they are loaded or not.
What I would like to know is whether the element visibility trigger is the right thing for this and if so, how can I manipulate it to do what I need?

Probably yes.
You'd use the CSS Selector and select via the class name for your dynamically created items.
In the "When to fire this trigger" option you would select "Every time an element appears".
Finally you would set the "listen to DOM changes" option. This checks every time the DOM is manipulated (e.g. by inserting your list element) if the other criteria in the trigger are now matched.
Note that GTM warn that there may be a performance penalty for using that option (since this runs on every DOM manipulation). So you probably don't want to do this a lot.

Related

Determine the script origin (php) of a dynamically inserted dom element

I have a page with a select. Then onchange, based on the value selected, a URL is loaded into a div (using $('myDiv').load()) This URL is allowed to have javascript/jquery that executes, which means that it can manipulate the DOM outside of the div in which it loaded.
The desired functionality is to have dynamic tools based on which value is selected. To prevent unintended crossover of functionality, whenever the select value is changed, the previous value's elements/scripts/everything it loaded from the URL should be removed from the page. Ideally I would be able to search the DOM and find all elements that had some kind of attribute pointing to which script they were generated from. I haven't been able to find any such attribute. I don't want to rely on the outside script giving its elements a certain class to mark them as an element that needs to be removed.
Think of a hotel: The client doesn't need to make the room ready for the next person to stay in that room. The hotel is responsible for that.
What can I do to make this work?

How to handle dynamically-added DOM elements for progressive enhancement without knowing the method of adding?

I have a simple script that that "progressively enhances" specific <input> elements with a draggable slider (demo of the jQuery plugin).
Additional <input> elements may be added, and the whole thing will be placed in many different scenarios (it's a pluggable frontend widget). In other words, I cannot hook onto some "Add Another Slider" button's click event, because I have no idea where those additional elements may come from (it may be a button, several buttons, some AJAX call, etc).
To handle those additional elements, currently I'm using:
// for any dynamically added elements:
setInterval(find_and_init_all_sliders_that_are_not_yet_inited, 200);
Is there a better way?
TL;DR:
I wanna run a function each time new DOM elements are added. But I have no info or control on how or where those new elements will be added.

removing iframe will cause memory leaks?

I have a single page application which create and remove a number of iframe based on user input. each iframe could contain a jqgrid, a form for input submission with jquery.validate plugin etc...
the main page could access all the iframes to retrieve current operation status and some data to rebuild the main menu.
is safe to just remove the iframes or i need to .empty() the body before removing them?
EDIT:
when i say "retrieve current operation status and some data" i actually access the iframe properties using something like this
jqueryFrameObject[0].contextWindow.myCoolProperty
but never cache the object in the main page
No : jQuery takes care of removing the elements which could lead to memory leaks :
In addition to the elements themselves, all bound events and jQuery data associated with the elements are removed.
If you don't keep other pointers (including hidden ones based for example on closures), you'll be safe. Be careful not to use the native addEventListener if you don't want to keep hidden links to your removed elements.

Javascript - best way to handle post-load generated content

I've been wondering how to efficiently and generically process content that is generated after any user action.
For instance, let's say my script processes all paragraphs of Facebook at page load in order to make them blink. What would be the most responsive way to make the text that is displayed later (because of infinite scroll e.g.) blink ?
Thanks in advance for your ideas,
Rolf
Personally, I define a function called dom_mods() that modifies the page in order to apply any special effects such as autocompletion, default value for <select>, auto-resizing textareas and so on. Whenever I add content to the document, I call dom_mods().
The only catch is to make sure you don't affect the same elements twice, or if you do it needs to not make a difference. For instance, there might be a class that defines a set of elements to affect, so the class should be removed by dom_mods() so it doesn't get the treatement twice.
You would add the blink function to the parent object that would encompass all the children.
In other words if you use jquery you would specify the event selector as (".parent .child") when registering the child blink event. This way, you don't need to register any additional jquery "dom_mods" function or call anything else which wastes memory and time.

What's the best way to attach JavaScript events to a list of AJAX-loaded search results?

I have a search page that loads results. Each row has a Delete button next to it which I want to fire a particular JavaScript function on my page using some parameters specific to that row.
Is it best to put the function call directly into the HTML being generated, e.g. onclick="deleteFunc(<params from results array>);" or should I instead attach the jQuery click events? I've been opting towards the latter, but in this case I'm not sure the best way to do that.
Can I somehow attach events to some HTML even if it is not yet added to the page? If not, I'll have to add all the results to the page, including the array index of each row from the search results, then attach the click event to the button while accessing that row's parameters from the original array using the index I stored in a hidden HTML field. This seems like a lot of work re-correlating everything, when there is a point at which I build the HTML where I have all the parameters that particular row's delete button needs.
Assuming I use jQuery's click events, is there some danger in running out of memory? I may have a thousand rows coming back. If so, what happens when it runs out of memory?
Another option would be to serialize each array row's JSON into a hidden field next to the delete button, which I could then retrieve later. Seems like that would be more memory efficient, but also seems ugly.
Think the .live() JQuery method may work for you.
Attach a handler to the event for all elements which match the current selector, now or in the future.
You can add events to dynamically added elements using the .live() method.
$('.element').live('click', function() {
// do some stuff.
});
Yes you can attach events to HTML elements even before they exist using live method
$('.selector').live('click',function(){
alert('Do something here!');
});

Categories

Resources