Accessing dynamically created iframe within imacros - iframe

I need help with implementing an imacros script.
My basis script looks like this:
VERSION BUILD=8940826 RECORDER=FX
TAB T=1
URL GOTO=URL
TAG POS=1 TYPE=INPUT:TEXT ATTR=NAME:login-custnum CONTENT=12345
TAG POS=1 TYPE=INPUT:TEXT ATTR=NAME:login-username CONTENT=myuser
SET !ENCRYPTION NO
TAG POS=1 TYPE=INPUT:PASSWORD ATTR=NAME:login-password CONTENT=password
TAG POS=1 TYPE=BUTTON ATTR=NAME:login-login
This script works, the login is performed.
After this I need to use one of 3 iframes.
I cannot use
FRAME NAME="menu_iframe"
because the frames are created dynamically and NOT statically.
I tried the following:
var myframe = window.frames["menu_iframe"];
But this does not work.
After that I want to click a certain button in that iframe.
Thanks in advance

First of all I suggest checking the frame names. Try the macro below that consists of only one line. It must show names of all frames on the page with ‘alert’ dialog.
URL GOTO=javascript:{window.location.href='javascript:{var<SP>f=[];var<SP>l=window.frames.length;for(i=0;i<l;i++){try{f.push("\\""+window.frames[i].name+"\\"");}catch(e){f.push("no_frame_name")}}alert("FOUND<SP>"+f.length+"<SP>FRAMES:"+"\\n\\n"+f.join("\\n"));}';undefined;}

Related

Google Tag Manager - collect data attributes without using the datalayer

I'm trying to collect the value of data attributes when clicking on the element containing it but I would like to do it without using the datalayer.
I'm currently using the datalayer by pushing the data attribute into the datalayer with javascript, everything works but it's annoying to always modify the code, I'd like to do the same without using javascript.
My code looks like this:
link label
In Google Tag Manager, I have created an "automatic event variable" (not sure it is called like this in English, my GTM is in French) using the name "Generic_Dataset_product" where I select "element attribute" and as an attribute, I have tried multiple things without success like data-product, gtm.data-product, product, ...
To use this variable I have created a simple trigger that detects clicks on class "link_class" and associated an event (event_category, event_action, event_label) where I add the collected variables with the right name {{Generic_Dataset_product}}. Instead of seeing the expected value, I see "track_event".
Is there a way to collect data this way? I want to use the "automatic event variables" to collect content from src, data attributes, and other elements in the code as there are no predefined variables for this in GTM.
Thanks
Getting arbitrary attributes of clicked elements in GTM is a trivial task. And there are many ways of doing it. I prefer CJS cuz I often need to do mutations and sanitizing there. Your problem is that you're not debugging it properly.
First, make a trivial CJS variable like so:
function(){
return {{Click Element}}.getAttribute("data-shop");
}
Now open your preview debugger and actually go inspect all variables GTM sets on your click. Including your new CJS var as well as your auto-event vars. If you don't find what you're looking for from there, come back here and show us screenshots from the actual debugger and let's debug from there.
Here's how you enable {{Click Element}}:
There is no reason to avoid the datalayer. The datalayer already contains the clicked element, and the data attributes are properties of that element, so you can address them via dot notation like this:
This saves you custom javascript (which is something you might want to avoid if you ever plan to implement a proper content security policy, since custom scripts require the use of eval).

GTM - CSS Element

I'm wanting to create a variable to grab the username from a landing page (assuming it's possible). In my attached examples, I'd like to grab the text "Landing_page_test".
I'm just learning CSS so I'm not able to single out just that text.
Any thoughts/suggestions would be much appreciated! enter image description here
Console
Elements Pane of Landing Page
document.querySelector returns an element, not the text. Add .innerText
Try it out on this page: document.querySelector("a.question-hyperlink").innerText to get the name of the question.
But you probably don't want to do it as custom html tag. You probably want to do it on click. in that case, you have {{Clicked Element}} variable in GTM, of which you can also get .innerText, or get its .parentElement and further navigate DOM from the clicked element as you wish and get whatever you need.
Here's the html of the Location & Date/Time text blocks
Text Block

Google Tag Manager - Returning a href from another element when a click tag is fired

I'm working on Google Tag Manager/Analytics for a site, here's an example page that a tag is being fired on:
https://www.forktrucktraders.co.uk/listings/refurbished-combilift-multi-directional-gas/
The tag is fired when the "Send Message" button on the contact form is clicked:
https://imgur.com/a/qTPb3Ci
Right now I've got the event's action returning the URL of the current page the form was sent from, but I'd like to know if it's possible to get the href from the "Visit dealer's website" link on the page, as it would give a faster idea of which dealer the listing is coming from. Probably a long shot to make this happen solely through Tag Manager (if not possibly just a hidden bit of data that just has the dealer's name in on the "Send Message" button) but I'd appreciate any input.
You most certainly can. Off the top of my head something along the lines of the following should work...
It depends on whether you prefer just having the url or breaking it down further.
Just the URL:
Create the following in a custom HTML tag within GTM
<script>
//This selects your desired href:
var dealerURL = document.querySelector(".stm-dealer-image-custom-view a").href;
//This pushes the value into the dataLayer temporarily for use later:
window.dataLayer.push({
event: 'formSubmit',
dealer: dealerURL
})
</script>
Ideally, this should be fired on page load of all your listings pages.
Next create a new User-Defined Variable of the dataLayer var type
within GTM corresponding to dealer, this will store the value to be
pulled through in your event.
Now just change your event action to {{dealer}} (or whatever you
ended up naming the datalayer variable), and this value should be
pulled through in your event.
Getting the dealer name:
Now presuming the href format is always the same across the site you could split this by a delimiter instead:
var dealerURL = document.querySelector(".stm-dealer-image-custom-view a").href;
var dealerSplit = dealerURL.split("/");
var dealer = dealerSplit[4];
The above would leave you with a variable containing the string 'hitec'.
This however is quite prone to breaking if the page path does not always follow the same format, as such it would be better to use RegEx instead.
To answer your specific question, you would need to create a variable to target that specific link element that contains the dealer's website's url. The simplest way is probably to add an id to the <a> element and create a variable in GTM to track it.
I had a quick look at your site and I think you have more problems with the form.
Your even triggers without validating the form, this would lead to extra events.
The event category, action and label could use some work in organizing it to help you analyze the data
You also have a mix of gtag.js and GTM snippet on the page, I would say this is not normal practice, usually, GTM is enough. You can contact me through my profile if you'd like to chat more about it.

How to implement SiteCatalyst inbuilt variable 'pageType' in DTM?

I am trying to implement SiteCatalyst's inbuilt variable 's.pageType' using DTM (which we use to capture the 404 error pages).
I can definitely write this piece of code in DTM's s.code:
s.pageType="errorPage"
But the problem is the condition which would identify if the page is 404 error page or not, can be identified only at page code level (as per developers, there are exceptions which is thrown if error page comes up, which can be used to identify this condition on the page), but this logic we cannot be used in DTM. Along with this, on the 404 error page, the pageName variable should not be populated.
How this can be done, since I am fetching pageName from a data element in DTM (inside "Pageviews & Content" section) which would always fire on every page.
How to implement this, please help me out. Am I missing something ?
Thanks,
Adi
It sounds like your setup is like this:
<dtm header tag>
// code that identifies 404 page
<dtm footer tag>
And it sounds like the issue is that since data elements are the first thing evaluated up in DTM top tag, your page name data element is being evaluated before it is known that it is a 404 page.
What I would do is in the code that identifies that it is a 404 page, make it output a global js var that flags the page as a 404 page, e.g. window.is404Page=true;.
From here, the overall goal now is to keep your existing data element and pageName assignment as-is, but then later override it with an empty string (and pop pageType instead). You didn't really give any details about where you are actually setting pageName, so here are some scenarios that should point you in the right direction:
Scenario 1: pageName is set in Pageviews & Content in the main tool config
1.a: In Library Management, if you have set AA to load at Page Bottom, then go to Customize Page Code section, make sure it's set to execute "after UI Sttings" (If you are already using this code box and it must be set to execute before UI settings, then skip this and go to 1.b). Click on Open Editor and add the following:
if (window.is404Page) {
s.pageName='';
s.pageType='errorPage';
}
1.b: In Library Management, if you have set AA to load at Page Top, then you will need to create a page load rule (or use an existing rule that will trigger on every page view) that evaluates at page bottom, on dom ready, or onload (basically anything but top of page - point here is to get it to eval after is404Page has been set). Within the rule, go to Adobe Analytics > Custom Page Code and add the code from 1.a there.
Scenario 2: pageName is set within a page load rule
If your page load rule is set to trigger at "Top of Page" then you will need to create a separate rule that triggers after that. See 1.b.
2.a: If you are setting pageName from within the DTM field using %dataElement% syntax, then add the code from 1.a to the Custom Page Code section.
2.b: If you are setting pageName from within the Custom Page Code section, using e.g. s.pageName=_satellite.getVar('dataElement'); then simply add the code from 1.a directly below it.
TL;DR: set a global js var to act as a flag in your on-page code that determines if 404 page and then look for that in your DTM code to overwrite pageName and write pageType in DTM custom code sections that get eval'd after the js flag var is set.

How do I link different child html in a single parent html from a second child html?

First, I am a new at webpage programming and I didn't seem to find a similar question to address the situation I am trying to figure out. Maybe I wasn't using the right terminology...
I have a parent html file (House.html) with essentially two iframes displayed ("room" and "info"), see below.
House.html<br>
-iframe "room"<br>
-iframe "info"
iframe "room"<br>
-Room.html<br>
-->link "link_A"<br>
-->link "link_B"<br>
iframe "info"<br>
-A.html (some text)<br>
-B.html (some text)<br>
Within the "room" iframe I am loading Room.html where there are multiple links contained (link_A and link_B). Clicking a link (link_A) is supposed to change "info" iframe to show A.html. Again, clicking link_B is supposed to change "info" iframe to show B.html. All html pages are on the same domain.
I understand how to link a child to a parent, but I am trying to figure out how to display different html pages in a specific iframe within a parent html page from a third html page.
Can anyone point me to an answer? Would I need to use an if() function in House.html and a target value from link_A or link_B?
From http://webdesign.about.com/od/iframes/qt/target-links-iframes-and-frames.htm
When you create a document to be inside an IFRAME, any links in that frame will automatically open in that same frame. But with the target attribute on the link (the A element or AREA element) you can decide where your links should open.
You can choose to give your iframes a unique name with the id attribute and then point your links at that frame with the ID as the value of the target attribute.
For your specific example, it would look something like:
Page A
Page B
You could use JavaScript to change the src attribute of the second iframe. You can do that with jQuery - e.g. put this code into iframe1 (untested).
$('a').click( function() {
$('#iframe2', window.top.document).attr('src', 'new-src.html');
});
Note that the parent page and the frames need to come from the same domain and subdomain (due to the single origin policy). If that's not the case, you would probably need to reload the whole page, by putting target="_top" in the link inside the iframe, and changing the src on the server side.

Resources