I am using Google Analytics on a Sharepoint site. On the main page, we have an image in an image carousel that once clicked will bring you to a different page on the site. I have tried everything to track clicks on this image in GTM - click url, click ID, css selector, etc. I can not figure out why my trigger never fires. I have attached the
image, what pops up when I click inspect, and variables that show up with the click in GTM preview... (This is the second half of the variables in preview).Three images total.
Good job on including all the relevant debugging info.
Judging from your inspect, you're looking at the image.
However, judging from your click event inspection, the click lands on an a.
I don't see the a in your DOM on the screenshot, but it may be either dynamically added, or just outside of the screenshot.
No matter. Let's start to carefully debug it. Make a trigger that would be triggered on anything that matches a. That's just a debugging trigger. Make sure it triggers on your image clicks.
Now, let's just make a simple CJS variable that would console.log({{Click Element}}). No need to use it anywhere, just make it. Go to the debug view again, try clicking the banner again and look in the console for something that would look like this:
See that pretty element? Now the wonderful dev console allows you to copy JS path to this element and do whatever you want with it. Mainly, comfortably and quickly test CSS selectors against this element. I suggest changing the selector JS console generated. It should work (unless the page is too dynamic), but it would be fragile. Having the element, however, you'll be able to make your own selectors.
Related
Code and GTM Setup Example
I have tried a few variations in how I set my triggers, but none of the ways I have tried have actually started to track test clicks. The client has click to display text to show their phone numbers, ideally so that we can track how many visitors are coming to the site to get the phone contact details. I will include some code below. I am not sure if it is my syntax or if I am forgetting something outside of this setup. GTM is installed correctly and tracking standard google analytic information. Thanks in advance.
Previously I have tried to limit the trigger based on the class, but I have instead added and moved to ID.
This is tricky part of GTM because when you have nested elements like this:
<div>
<span>
<h2>
It is sometimes difficult to say what exact element is clicked.
Your triggers are set for <div> (based on ID you have in your screenshot) but I suspect when you click the actual element that is picked up is one of the <span> ones. To fix it, firstly in GTM go to variables tab -> Configure Built-in variables and make sure "Click Classes" is enabled.
Then setup a trigger like this:
This one will listen to one of those spans you have there.
Usually my approach to click events is: before I setup the trigger I enable the preview mode with GTM so that I see GTM's debugger console. Then click on an element - this action will generate click event on left hand event log. Select it and you will be able to see exact element that is being clicked with it's IDs and classes. Then it's easy to setup the trigger.
Hope this helps.
This problem is specification on RobotFramework(Selenium) language.
I would like to Click on button ("i.stack.imgur.com/PTNYl.jpg") after confirm purchasing
For clear information please see below picture with ordered number
Select 2 items.
Click "สั่งซื้อ" (confirm purchasing).
Pop-up of cart will show about description and Payment button image.
(Click)
Website : "www.tarad.com/product/5807261#cart"
Code : (saved to .txt and run on Command Prompt)
Open Browser http://www.tarad.com/product/5807261#cart chrome
Select From List By Value product_qty 2
Click Button f_buy
Wait Until Page Contains Element xpath=//*[#id="flyout_cart"]/div[6]/a/
Click Link xpath=//*[#id='flyout_cart']/div[6]/a/span[#id='btn-payment']
(click)
I can find this pop-up cart description, but can't click on button for payment, moreover, I try using Click Image, Click Link, Click Element with payment button xpath that got from Chrome Browser.
I apologize about my English writing and thank you to your attention.
Don't use the Click Link and Click Image, if you are not sure the underlying element is that type - use the general Click Element. Looking at the locator you've specified, the target is a span, so Element should do.
Regretfully I cannot open the site right now to check the html (mobile...), but as far the locator you are using:
do not use indexed paths - the div[6] up there - if the page structure changes just slightly, they can easily brake (which is probably the case with your run)
try not to use direct descendants (the single /) except if you're not sure the structure will remain the same in the long run - they are much faster than "any descent down" - i.e. //, but again, if the structure changes in a future build, they will break. For good or bad, these two negatives are what browsers generate when you ask them to create an xpath
finally, I see in your sample the target span has an id attribute - that is (almost always) the safest and fastest locator strategy to use. So remove everything before it, and address the element as "id=btn-payment"
E.g. change the last call to
Click Element id=btn-payment
Hope this will resolve it for you
I am trying to navigate through a webpage using just my keyboard. Through the use of my tab key I can enter in data into several input boxes, and press several submit buttons.
However I run into a problem when trying to set focus to an image element on the page. For some reason it does not allow me to select it with the tab key. I can click on it with my mouse and then a popup appears but this really slows down efficiency.
I have considered creating a script in VBA to do this but right now I would prefer a quick-fix without having to spend hours developing a macro.
NOTE: I did quickly try to assign the reference to the <img> element and use the Click and Focus methods in VBA but that didn't work. I don't get an error, the code runs fine but nothing happens on the webpage. This leads me to think that this will be a bigger project than it appears, hence my reluctance to go down that path.
I did a bit of research and it seems that tabindex is not supported by the <img> element. Does that mean what I am trying to accomplish is impossible with the keyboard? Is code my only option?
If anyone knows anything that could help in VBA by all means I will take your advice into consideration.
Unfortunately the webpage is password protected and its a company account therefore I cannot post it.
After right-clicking inspect element in my Chrome browser this is what I see:
<img alt="View Quantities At Other Locations" src="/WebOrder/Images/CheckQtys.gif"
title="View Quantities At Other Locations" class="popup"popupdirection="upperleft"
popupwidth="380" popupcontent="#ProductQuantitiesForAccessibleBranches"
onbeforepopupcreate="onBeforePopupCreate_GetProductQuantitiesForAccessibleBranches(this)"
popupajaxformid="GetProductQuantitiesForAccessibleBranches"
onbeforepopupajaxpost="onBeforePopupAjaxPost_GetProductQuantitiesForAccessibleBranches(this)"
oncompletepopupajaxpost="onCompletePopupAjaxPost_GetProductQuantitiesForAccessibleBranches(this)"
productguid="00000000-0000-0000-0000-000000058927" displayitem="732899500"
brandguid="00000000-0000-0000-0000-000000000000" brandname="" brandsku="">
Does anyone have any ideas how I can set focus to this element (either with my keyboard or VBA)?
You can focus on a div using <div tabindex=0> Stuff Here </div>. Place the image inside the div and use the div to manipulate it.
Following up on How to rewrite URLs referenced by Javascript code? I'd like to overlay a button on top of someone else's website (e.g. overlay a Paypal button alongside Stackoverflow's bounty button) and have the two <iframe>s scroll together. The button would reside in the top layer. The website would reside in the bottom layer.
I understand that transparent <iframe>s were/are abused for clickjacking but the browser security mechanism seems to block legitimate use-cases. In my case the user is seeing the same button he/she is clicking. It's even possible that this is a browser bug.
Here is what I see under Chrome:
The top <iframe> intercepts all mouse clicks, even for areas that do not contain any components. Meaning, users cannot interact with the bottom layer at all.
If I style the top <iframe> with pointer-events: none the opposite problem occurs: users are able to see the top layer but all mouse clicks go to the bottom layer. Applying pointer-events: auto to child components does not help (clicks still pass through to the bottom layer).
If I size and position the top <iframe> so its area is equal precisely to the button I am trying to overlay, then mouse clicks go to the right layer but the top layer fails to scroll alongside the bottom layer. Meaning, the button always remains in the same absolute position as the bottom layer scrolls.
Is it possible for me to position a button in the top layer so that it always aligns with a certain position in the bottom layer? In the example where I position a Paypal button alongside the Stackoverflow bounty, I expect the Paypal button to scroll off the page as the user scrolls down the question.
https://stackoverflow.com/a/4087397/14731 leads me to believe this is not possible. Is there another way to implement this?
UPDATE: Here is a jsfiddle for you to play with. The test button is found to the right of "NEWS & VIEWS" in the middle of the page.
Update: New approach
Following discussion with Gili below, the requirement for the solution to work across multiple pages made me rethink my solution.
The new approach:
Doesn't require any code changes or specific features on the target site.
Works on every page while the user navigates (as long as they stay on the same domain)
Could be tweaked to inject any HTML/JS into any DOM element within any target page
My solution works as follows:
Send the person you want to demonstrate Widget X to an email with a link to your instructions page
That instructions page contains a bookmarklet which they add to their bookmarks bar
They visit their own site and click your bookmarklet
Your bookmarklet injects javascript into their page
That javascript creates a pop-up window with content that appears to belong to the target domain, since that domain generated the popup
That pop-up window then monitors the DOM on the target browser window (window.opener) and injects our arbitrary HTML whenever the current page doesn't contain our target node ID.
It seems to work well in my testing (perfect in Chrome, haven't tested across all browsers yet) and seems to work on every target site from StackOverflow to Twitter.
Live demo here: How to demo an web widget on a third party site without having access to their code
Sample code below, expanded for readability:
s = "<script type='text/javascript'>setInterval(function() { if(!window.opener.document.getElementById('gctrlPixelator')) {var i=document.createElement('IMG');i.src='//lorempixel.com/400/200/';i.id='gctrlPixelator';i.style.cssText='top:20;right:20;position:absolute;z-index: 9999;';window.opener.document.getElementsByTagName('body')[0].appendChild(i);}},500);</script>";
t = "<div style='text-align: center; font-family: Arial, Helvetica;'><h1 style='font-size: 18px;'>Demo running!</h1> Keep this window open and return to the main site window to continue the demo.</div>";
w = window.open('','name','height=200,width=400');
w.document.write(s);
w.document.write(t);
The above should be converted into a bookmarklet before deploying to an 'instructions' landing page for a potential client.
Original solution
First, sorry for posting this as an answer rather than as a comment. I've been thinking about this for half an hour, and only just realised I need 50 reputation to comment. So, apologies, but I wanted to share...
I agree that it's unlikely there is a cross browser way to do this double iframe trick. I read your other question about javascript URL rewriting and it lead me to an idea: Rather than trying to embed/hijack their site on another URL, how about creating a bookmarklet that allows you to inject your Javascript into their page?
It could work like this:
Direct them to your site where you host the custom bookmarklet link. Ask them to add it to their favorites.
Ask them to go to their own site, then click your bookmarklet in their bookmarks.
This would inject your JS into their page, allowing you to edit the DOM any way you wanted (e.g. changing styles, adding DOM elements, etc.)
Code something like this, converted to a bookmarklet (i.e. wrapped in a function with a javascript: at the start) could do the trick...
var script = document.createElement("script");
script.setAttribute("type", "text/javascript");
script.setAttribute("src", "http://www.example.com/file.js");
document.getElementsByTagName("head")[0].appendChild(script);
I've tested that in Chrome and it seems happy to load the JS cross-domain. The only rule seems to be that the protocols must match (http or https).
Not quite what you asked for, but a possible solution.
I am trying to create a input box somewhere on the screen in chrome, not attached to extension button like a normal popup,
it also needs to be running all the time so the user doesnt need to click the extension button to open it, for example so they do not have to come out of fullscreen.
What i have so far since im not great at html or java just a simple form
What i have: http://i.imgur.com/xCY1a41.png
What i want: http://i.imgur.com/cJH8bD4.png
I would also like to control the position of the form but from what i have above doesnt seem as if i will be able,
Sorry if its a bit vague but anything helps!
What you want to do can't be done in Chrome. This is by design. If web content could display itself outside the boundaries of the browser tab's content area, then users might be confused who was presenting it. Confusion is just the beginning of that problem: if web/extension content could masquerade as a system or browser-level alert, then that content could trick the user into doing something dangerous.
If you need a presence outside of a browser tab, your options are a native app or Chrome App.
If you want the input box to be displayed on the page you could use content script - then it would appear as you presented.