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.
Related
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.
I'm working on an extension that's supposed to use the content of the page to determine whether to show an interface to the user.
The ways to show an interface, if I'm correct, are using a browser action or a page action.
And neither can be triggered programmatically. But content scripts could be written to inject an equivalent GUI into the webpage.
So, does it make sense to modify the DOM using content-scripts to display an interface as a substitute for page action? It seems like an obvious work around to me, and I'm sure there are good reasons to not let page actions be triggered programmatically.
Well, modifying DOM must be done by only Content Scripts, as that is the reason they exist.
Want to fetch any data from current page, alter anything in the page, add new UI in the page - whatever, content script will help you do that.
It has nothing to do with Page script Or Browser Script.
YES, you can not programatically trigger page/browser action. It has to be done by explicit clicking.
But if you want to open a UI by clicking a chrome extension, then there is a popup js for that.
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
OK. So first, I will try my best to explain so good. My friend has gotten cursed out on this forum for not explaining, so I will explain. :)
Ok so I have my program built and all. But then it hit me! Wouldn't it be better to add a news feature? One teeny tiny problem? I cant? How would I implement a interactive code into an HTML page.
Like can i connect a button to a URL that will make the program do something. Almost like you can open cydia tweaks with there identifier and url EXAMPLE: http://handleopenurl.com/scheme/cydia And then i can add urls so i can update the program, without updating the files.
Or even just a featured news thing would be nice. But how would i implement this perfectly. I tryed a webrowser, but the page is too big for it. I am good at html, not much at css, i mostly use Adobe Muse http://www.adobe.com/Muse
Last question. Kinda defies the first thing i said about having my program finished.
Is there a way i can add a plus button and make it add more buttons and more labels and all?
This would help with allowing users to customize more then what the program can handle. By The Way, its a winter board Theme Maker. So I have a bunch of icons with there bundle identifiers and I create the folders with VB.net and all that stuff. But i want users to be able to click a plus button to add MORE text boxes and file browsers.
Any ideas? Maybe DIM 1 as NewFileBrowser? But i need to move all the buttons and i need it to be able to be clicked an infinity amount of times. I can do the coding for all of these buttons, but i jest need to know how to create them <1 Move them and the button so that the button goes further down each time, and more boxes will go further down. Much help apreciated. THANKS:)
EDIT:
Are you trying to say that you're wondering how to have a web browser control in a vb.net >app, which displays a web page, and when a button is clicked on the page, your app detects >it and does something? – Thraka
That sums up the top part. I am using windows forms, and it is coded in VB.net
If you get the object you want, like the button, you can hook the event and have it call code in your form.
Find the object using the Browser.Document.GetElementById method.
With that object, add an event handler to the Click event.
See http://msdn.microsoft.com/en-us/library/system.windows.forms.htmlelementeventhandler(v=vs.110).aspx for information about the event handler used
I am recording a .Net application using Selenium IDE. Theres this scenario, that a textbox is presnt. I need to enter a name to search. As soon as i start typing, matching options come in a dropdown below. I have to select one of them, then the application goes to the next page.
The problem is, Selenium doesnt record this selection from the drop down. More over, when the script is typing in the name, the dropdown list is not being visible at all.. i.e. the ajax call is not occuring.
Please help. I need the solution code in Selenese or HTML, since I'm not much of a coder myself, and also, I am simply recording and playback, so I am not using Java or other scripts.
This question is great,
and so is the answer in this blog: http://blog.buberel.org/2010/07/howto-test-jquery-ajax-autocomplete-menus-with-selenium.html
other option to deal with this problem is to use a different way to insert your text into the text box, as described here: Can selenium handle autocomplete?