first time here and completely new to coding. I want to track button clicks on my website in Tag Manager. The button is a thumbnail in an image gallery. It's the only video in the gallery and I want to see how popular it is compared to the images. The trigger type is 'All elements' and I tried to use Click Class as a trigger. The problem is that all the thumbnails in the gallery have the same class. So there is no way to identify the video thumbnail. Can't use Click URL either since it's not a link. It doesn't have an ID either. Any tips?
What you need here is to use a more specific CSS selector to the element you're wanting to trigger on. Most modern browsers can help you out there. If you right click the element you want to capture clicks on, you'll have something along the lines of "Inspect Element" as an option.
Chrome Example
In Chrome, this appears at the bottom of the list under "Developer Tools -> Inspect" as I see when I do the same for the Ask Question button on this page.
Firefox Example
In Firefox, this is just the Inspect option at the bottom of the context menu.
Other browsers will generally be similar. Selecting that option will open the Developer console, but will generally auto-select the element you selected from the page. In Chrome (again, other browsers will be similar), right click the element and select Copy -> Copy selector.
This will copy a more specific selector than just the element's CSS ID to your clipboard. You might want to copy this down somewhere temporarily.
Back to GTM - You're right that you want to use the "Click - All Elements" trigger type here. Select the "Some Clicks" option so we can apply a filter to the event. Set the left-most option to "Click Event", the middle option to "matches CSS selector" and the paste the value for the CSS selector you've got in your clipboard. Save that, and you're good to go!
Now, this assumes that you're not doing a lot of dynamic work on your page. The CSS selector your browser gives you will be accurate for that very moment, but it may very well specify classes that change dynamically (e.g. if you're using a single-page application like Angular or Vue), so you might need to tweak it a bit to be generic enough that you can capture the element, but not so specific that it looks for a particular class that might change each pageload.
Related
Is there an easy way to find out which font variants are actually used within a page?
I'm working on a site that has a full font family imported, but would like to remove unused variations. I can go around inspecting elements, but figure there might be an easier way.
There are tools like Fount: https://fount.artequalswork.com/
But it's not time-consuming at all to do it by hand, really. If you're using Chrome just right click the page, go down to Inspect in the menu, and under the Elements tab you'll find the HTML of the page. Click inside the box and hit command + F to bring up the search box, and type in "css" so you can easily find their CSS sheets. Right click on the link and hit Open and you can search for the font from there (command + F again).
i want to change the size of the header of the Liferay portal page through css.How do i achieve this? i also want to change the color of the menu.
Nowadays every browser has some Firebug-style developer tools. E.g. on Firefox, hit F12 and the tool will open at the bottom of the page. Choose the "Inspector" (labels might vary, I'm looking at the german UI), find the "choose an element of the page" button, then point your mouse to the area of the page that you want to explore the CSS. You'll see how the appropriate part of the DOM is selected in the inspector and even the actual CSS rules that apply. You can temporarily change the CSS there and try out what values you actually want.
Next, learn how to build a theme in Liferay. You'll add the required CSS, identified in the step above, in your theme's custom.css.
Yes, this isn't the actual CSS that you need (probably you just wanted to know that single line), but your next question would be on how to change a different aspect of the default theme - this is how you can find it out and even solve other theme-related problems that you didn't even think of yet.
When using Selenium, I found the Chrome -> Web Developer -Styles window very useful in getting CSS names of web controls.
I could right click on a web control and would get the CSS name for that control. This helped me avoid using XPath.
However, the in-house web application has blocked right click, so I am not able to use that facility any more. However I can still use Firebug to show me the XPath of a control since it works if I click the arrow in Firebug toolbar, which then displays XPath of every control that I hover.
So, the question is - Does Firefox addons have a corresponding CSS identifier tool?
Or
Is there a way around the right click block in Chrome? (For some reason Chrome used to guess or build the CSS name quite accurately which I did not find in Firefox.)
The HTML panel of Firebug has a Styles side panel, where you can get all the applied styles for the selected element.
First, I know this question exists, but it's not what I'm getting at. I want to know if there is some view in Developer Tools that lets you see all styles added "via inspector." For example, I can select the span.count element and see this is something I added.
But I've added lots of stuff via inspector. Right now I have to click on each element to see if it's one of the elements that I added a style for.
Anyone seen an SO post for this already or know the answer? Thanks.
Since at least Chrome 22, you can open the "inspector-stylesheet" source in the Sources panel. It contains all the rules you have added manually.
If anyone is coming across this question and still having trouble with newer versions of chrome this worked for me:
Add a style in the elements panel on an element, then in the elements panel within the css rules, click on the inspector-stylesheet link. This will open the inspector stylesheet in the sources panel. You can leave it open there and add to it as needed.
I have an iframe which contains a few select drop-down lists for data entry. I recently began noticing that mouse-clicking the select element in the iframe, the drop-down list doesn't expand. The user can click on the drop-down to set focus on it, and then scroll through the contents using up/down arrow on the keyboard, but clicking the arrow button beside the list doesn't cause it to expand & show its contents.
The parent page this frame is embedded on resides on a different domain. Initially I thought this might have something to do with javascript onfocus events within the iframe. I stripped out all of the scripting, got rid of all of the css and pared it down to a simple static html parent with a simple iframe page of static html containing just a select element. When run on the same server, the dropdown behaves normally, but when the parent page resides on one domain, and the iframe content on another, the select list cannot be expanded.
This problem only seems to occur in IE7. I've tested in IE8 & IE9 without any problems, as well in Safari, Chrome & Firefox. I found a couple of blog posts (links below) that cropped up within the last week that seem to be running in to the same problem, but no resolution.
http://johannes.jarolim.com/blog/2011/10/20/internet-explorer-cross-domain-iframes-and-unusable-select-boxes/
http://scrumpy-jack.com/post/11177166236/html-select-crazy-egg-ie-and-iframes-updated
Has anyone found a solution to this problem?
We put in place a workaround for this issue by swapping out the standard drop down menus with JQuery drop downs for IE7 users only. We developed a script and dropped it between some IE conditional tags.
We couldn't wait for MS to issue another patch!
Apparently this bug is due to a security update that was just released (2586448):
http://support.microsoft.com/kb/2628724