Track Print event in GA Through GTM - google-analytics

I am new to GTM ,I have learned to track events like click and link click for different classes,but now i want track the print event from user,so can anyone please help me what steps should be done ,if a user tries to print the page .Thanking you in advance.

AFAIK there is no cross-browser javascript print event (ie has onbeforeprint), which makes sense since the print menu item is part of the chrome (damn you Google for confusing people about the difference between the browser chrome and the chrome browser - the former used to denote the "borders of a Web browser window, which include the window frames, menus, toolbars and scroll bars") and should not be accessible via javascript (a print button in the page could be detected with a click event).
Here is an article where somebody tried to create a cross-browser solution by combining onbeforeprint (for ie) with window.matchMedia (on the assumption that on print the print style sheets will be matched). This did not result in a particularly reliable solution.
There is already an (old and un-accepted) answer on stackoverflow that references this article and since there has been no progress since 2012 I think we can safely declare that there is no reliable cross-browser solution to detect print, hence you cannot trigger an GTM tag based on print, hence you cannot track print.

Related

Do accessibility settings like 'aria-hidden' prevent Power Automate from clicking or pressing content on a web page?

I am trying to select a dynamic calendar on a website. My goal is to open the calendar and input dates as I need to. I am not able to open the calendar by "Press button on web page" or "Click link on web page" with my selected UI Element. There are no ID's available to select. I have tried using the div class names with no luck. I have tried altering the selector to make a custom selector that looks for div names containing part of the class name. The 'Name' attribute in Power Automate is unavailable for the UI Element.
After trying all this, I noticed an Icon that is part of a div for the calendar, has
aria-hidden="true"'. When I checked the MDN here it has a warning statement: "Warning: Do not use aria-hidden="true" on focusable elements."
With being unable to select the calendar with standard and custom selectors, am I being blocked by the accessibility setting? Is Power Automate unable to focus on the calendar opener from aria-hidden="true"?
I don't know power automate, but what you observe makes sense. The attribute aria-hidden=true tells assistive tools such as screen readers and voice control software to ignore the element, as if it wasn't present at all.
A focusable element must never be aria-hidden=true. A screen reader won't know what to say when landing on it, and, as observed, it won't be reachable using voice control.
That's simply a pure accessibility fail (I would even call it stupidity, but well).
Technically, the solution is very simple: remove that stupid offending aria-hidden=true. Those who made that calendar probably put it there because:
they thought that screen reader and voice control users will always enter a date by hand and won't ever use the date picker
the date picker hasn't been made accessible, and so it's better to ignore it completely rather to present something only partially accessible
They copy/paste the code from elsewhere and didn't pay attention
They have no excuse for the third one, and for the two first, both reasoning are just wrong. Even if it isn't perfect, it's better to have a little something rather than nothing.
Keyboard-only user or screen reader user don't necessarily mean eased to enter a date manually. ON a mobile, the virtual keyboard is often painful to use, and people with limited movement sometimes use a device with only a few available keys (such as enter, tab, escape, and arrow keys only). Additionally, both might be combined if you think about someone who has a strong dyslexia and an inability to use his hands (the device would be actioned with feet, blinking eyes, etc.).
In theory, you shouldn't ever use custom widgets if you can avoid it. For entering dates, the standard exists: input type=date and friends.
Using standard widgets is the best guaranty to have something accessible at long term. Even if it might not be 100% accessible right now, it's getting better as the time passes.
Sadly, UX designers often don't like standard widgets much because it doesn't look like what they want, and there are still a few older browsers which don't support them all very well.

Have a link open the search function (Ctrl+F) on Wordpress

I've looking for a way to open the browser search function to look for text on only one page of my Wordpress site.
I want this to be self contained on one page. Basically the functionality of pressing Ctrl+F, but have it as a link or button, which in my boss' words, is "for the less tech-savvy users out there."
This is what I found so far
< a href="#" onclick="find();">Click here to search the page < /a>
Which worked great on FireFox, but did nothing in Chrome.
Is there a way to have this work in other browsers or have it so when I click the link on the page, it carries out the Ctrl+F function to open the search box?
Thanks
As far as I know, you can't fire Chrome's native find function without hitting cmd + F. But you can always use window.find(). Perhaps that will help you better
EDIT:
After some testing, I came up with this pen. It works, kinda. I tested it on Chrome, Firefox and IE. Chrome and Firefox highlight the first occurrence of the word. If you click the button fast enough, they might highlight you the second one. IE doesn't do sh*t. Perhaps you could code different solutions for different browsers, but I don't know how that'd fit in your current code. In any case, window.find() has a documentation, but this bug report suggests this method should be terminated.
Another solution entirely: use Javascript's search() or indexOf() going through your whole page (yeah I know), and based on those returns, you can hardcode something that highlights the matched area, such as wrapping it around a <span> that has yellow background. This is but a suggestion, as I have not given it much thought, but I think it will help.

How do I make a mobile-friendly popup on my website?

Is there a simple way to trigger a mobile OS's native pop-up/alert/etc. from some form of web code? I'm writing an ASP.NET mobile web page and I'd like to, for example, have the iPhone's UIAlertView appear.
EDIT: What I'm looking for is not the method with which to detect which mobile browser is accessing the site (I already know how to do that). If the code to trigger a pop-up that will look nice in an Android browser is different than the code to trigger a pop-up that will look nice in an iPhone browser, I can simply throw in a switch statement that redirects the user to the pop-up that corresponds with their browser. I'm trying to find the html/javascript/asp.net code which will create a mobile-friendly pop-up, either in general or for the various popular mobile web browsers specifically.
Don't know whether there is any pre-built functionality in .NET that can achieve this, but you can surely write one yourself.
You can write a method, that returns the code for your popup, based on the user OS (simple switch statement should do).
EDIT after taking a short nap:
I believe you should reconsider using popups. They are quite annoying even on desktop browsers and many people block them automatically. Probably every blog about accessibility will tell you, that you should keep mobile version of your website as simple as possible because of various compatibility issues that you can run into.
Instead, try to think about some interesting way to incorporate messages for users in a different and appealing way, that won't disturb anybody.
What I do is use a div popup (that floats ontop of the page) and eighter make a big close button or set at timeout to remove it.
jquery mobile is a good place to start.

I don't want to display back and forward button in my browser. Is there any solution apart from popup trick?

customers does not want to allow user to use back or forward button. Just a clean page without commandbar and toolbar, same for FF an IE.
Disabling them is not an option as now.
You cannot change that kind of thing in a existing window -- the only way you can make those disappear is by opening a popup, specifying they should not appear in that popup when it's being opened.
Still, note that you should not try to disable those buttons nor have them disappear : your application should work fine with them, handle their actions -- after all, it's one of the few things users have understood in browsers...
And as a user, this is disturbing and annoying :
I don't like popup windows -- and I'm not the only one who doesn't
I don't like when a website tryies to take control over my browser
It will not always work anyway.
And, as a sidenote : even if the back/forward buttons are not displayed, users can still use Ctrl+left/right or some kind of equivalent !
I know this is not easy, but a part of your work as a web-developper is to explain your clients how Internet and web-applications work... not the same way as desktop applications !
If you can force your users into IE (can't believe I'm suggesting use of IE!) you can do this trick. Try running this from the command line
"C:\Program Files\Internet Explorer\iexplore.exe" -k
This will force IE into kiosk (or full screen mode), similar to pressing F11 when in a usual browser session.
PS. I agree with the other answers suggesting this should be discouraged but there are instances (such as when the end user really can't be trusted) that this is a good solution.
No, there's no other way.
However, this is extremely annoying behavior and should be greatly discouraged. This isn't a code issue to solve...this is behavior that shouldn't be implemented at all.
My opinion here, you have a client problem not a code problem. Whatever standard is the expectation, and the user has the expectation of having their back/forward buttons, break that and you break their experience.
Ever see a Windows application that removes the taskbar? That's the equivalent...
I don't think there is a reasonable way to disable the behavior. You may get rid of the buttons in various ways, but the behavior is still there (through keyboard commands, popup menus and so on).
The only reasonable way is to make your web application follow web semantics, and make the client realize this.
many web based ERP (for example) does not tolerate people using navigation buttons. BUT these web applications handle the fact people use these buttons and do not crash. That's what you should do. If each time people use the back button, they get an error message, they will quickly stop using it.
The solution that used to work in IE was adding a startup script with one line:
location.forward();

How to hide browser's menu?

I am developing an ASP.NET application for an online quiz test. The set of questions would be randomly selected from a pool of questions. The application works fine, but I want to hide the browser menu option (so that user cannot save or print the test) when the quiz page is shown. I do not want to open a new popup window. So how do I do this for the active window.
The application consists of around 5 web pages, and the test is on pages 3 and 4. So I want the menu to be hidden only on pages 3 and 4. Is this possible and how do I do this?
Thanks in advance
This isn't possible. You can only hide the menu bar in a popup window.
Either way, though, the user can always right-click and select Print, or use a shortcut like Ctrl + P. And even if you could hide the menu, they could just disable JavaScript. If they really want to print/save the quiz, you won't stop them. I suggest finding another workaround.
I don't think it is possible to do what you are asking.
And remember that there are other ways to print than using the menu of the browser : Ctrl+P generally does that , it's also possible to "save the page" from the right-click menu or using Ctrl+S -- and, of course, there is always print-screen ;-)
The best "protection" you can probably have is defining a correct license (which means you might need a lawyer, to get something solid), that explicitly forbids re-distribution of questions : this way, your users can re-use the questions for them -- you cannot prevent that, anyway -- but can't re-distribute them.
Of course, this is probably only worth it if you are developping some quizz with questions that you are going to sell.
Once the page is rendered to the screen the ultimate control goes to the user. He can turn off javascript and do the necessary job or he can capture the page and so many ways.
Better not to try doing this.
As long as the data is in the user's computer he may access it in one way or another, and i'm not sure its worth the hassle.
If you want to deny printing, you may try using some special CSS media types (like definning some styles with display:none or color:#fff).
http://www.w3schools.com/CSS/css_mediatypes.asp
But even like this the user might simply press PrntScr :)
You may also intercept ctrl+P keystrokes, by using an onKeyDown event on the whole HTML body and stop the bubling, but it may not work the same cross-browser.
You may also deny right-clicking on the page by handling the onContextMenu event ( http://msdn.microsoft.com/en-us/library/ms536914%28VS.85%29.aspx )
Also, the questions should be rendered as images, or deny selecting text from the page so the user wont be able to copy/paste the questions in an email (http://www.dhtmlcentral.com/forums//archive/index.php/t-18008.html mmight help)

Resources