Can't prevent showing the automatic PWA install prompt? - single-page-application

My goal is take over the "beforeinstallprompt" event, and only show it once the user taps on a button.
So per the docs, I'm catching the event like so:
window.addEventListener('beforeinstallprompt', e => {
e.preventDefault();
//save the event for later
});
However, the prompt still shows up on itself as if I never called e.preventDefault().
So what's going on here?

Related

Refresh checkout in woocommerce_after_checkout_validation

A client is asking to allow users to register during checkout. The problem is there are some logic about memberships so registering can alter the final price and I can't use the standard Woocommerce way.
So i wrote a couple of validations. First i check if everything is in order, if it is a second validation actually creates the customer account, set all meta fields, login the customer.
Now what I need is to fully realod the checkout page and output a notice telling the customer to press the checkout button again.
I'm using woocommerce_after_checkout_validation but I can't make it work.
I tried a wp_redirect and outputting an ugly in the error notice.
Any ideas on how to do this?
I ended up using Javascript hooks to fire an event after the validation. The error checking is pretty bad, in my case it works but it should be more general.
var error_text = jQuery(".woocommerce-error").find("li").first().text();
if (
error_text.trim() ==
"register_success"
) {
window.setTimeout(function () {
location.reload();
}, 1500);
}
});

How to set a goal in google analytics based on 'outbound click' events?

Tracking outbound links and forms can be tricky because most browsers will stop executing JavaScript on the current page once a new page starts to load.
This can be mitigated by setting 'transport': 'beacon'.
According to this support page, which I have followed, I have been able to set this up correctly.
<script>
var trackOutboundLink = function(url) {
ga('send', 'event', 'outbound', 'click', url, {
'transport': 'beacon',
'hitCallback': function(){document.location = url;}
});
}
</script>
And my links do this:
Check out example.com
When I test click on it, I can see it registered on RealTime > Events:
And yet when I try to set a goal the event is not seen:
Admin > Goal > new Goal > Custom > Event > Goal Details set to outbound and click:
And yet when I click on verify goal, it says nothing like has been found in the last seven days. I have waited for many hours and still nothing is seen, even though the real-time event is seeing the clicks.
What am I missing, please?
UPDATE:
After waiting for 24 hours, I can see the event showing up in the report section. However, the goal verification still can't see it.
If it is not available in the regular reports either it most likely is a matter of waiting a bit longer. It can take up to 24 hours for events to show up in reports.
Please let us know if that was indeed the problem

JavaScript: Limit Client to click button twice

How can i limit a client to click button only one time per X minutes?
Im not looking for this!
function doSomething() {
document.getElementById("btn").disabled=true;
setTimeout('document.getElementById("btn").disabled=false;',60000);
// do stuff here
}
NOTE: If user refresh my page he must continue unable to click the button.
I also tried by getting client IP but i didn't get mine.
If you're trying to do this 100% client-side, then you need to set a value in a cookie.

Google Analytics events fail to show up

I'm trying to get Google Analytics working on my blog, but the events are failing to show up in my account.
Part of the issue is that I'm using the new async code, but most of the documentation relates to the older synchronous version. I've read a bunch of SO and blog posts but can't quite see what I'm doing wrong.
One mentions that you have to "activate" event tracking in your site's profile, but I can't find where I might do that.
I originally put my Google Analytics code in an external file called ga.events.js, which is still linked from my site. I attached the events from a jQuery loaded event:
$(function () {
$('.rss').click(function() {
trackEvent("engagement", "rss subscribe", "rss subscription link clicks");
});
function trackEvent(category, action, label) {
_gaq.push(['_trackEvent', category, action, label]);
}
});
But I found a post that said you can't link in an external file for Google Analytics, so I also tried the old fashioned onclick approach:
email list
I put the _target="blank" attribute in case the request wasn't completing before the user navigated away from the page.
Executing the code in the Chrome console on my site returns a 0, when I was expecting a boolean value:
_gaq.push(['_trackEvent', 'Engagement', 'click', 'RSS subscription link'])
I've waited 24 hours after each of these tests to see if the event tracking wasn't real time.
What else should I try? Any obvious mistakes?
Figured it out. I had onclick instead of onClick with a capital C. Wait, JavaScript is a case sensitive language? Who knew?
I also had the syntax of the GA call incorrect.
Here's what my working code looks like:
email list
And here's a version that works using jQuery to attach the click handlers:
$(function () {
$('.rss').click(function() {
trackEvent('Engagement', 'Sidebar link click', 'RSS feed subscription');
});
function trackEvent(category, action, label) {
_gaq.push(['_trackEvent', category, action, label,, false]);
}
});

ASP.NET linkbutton raising onBeforeUnload event twice

I've posted this here, but thought it might deserve a question on its own.
What I'm trying to do is show a dialog box that asks the user if he/she wants to leave the page if there are unsaved changes. That all works fine. But the problem is described below:
Has anyone come across the problem where Internet Explorer fires the onbeforeunload event twice? While Googling around, I found it has something to do with the fact that for (among others) an ASP.NET linkbutton the HTML code is <a href="javascript: __doPostBack....
Apparently, when IE encouters a link that doesn't have a href="#", it fires the onbeforeunload event. Then, when you confirm the javascript dialog box we're showing, the page will do the 'real' unload to navigate to the other page, and raise the onbeforeunload event a second time.
A solution offered on the internet is to set a boolean variable and check on it before showing the dialog. So the second time, it wouldn't be shown. That's all well, but when the user cancels, the variable will still be set. So the next time the user wants to leave the page, the dialog won't be shown anymore.
Hope this is a little clear, and I hope someone has found a way around this?
In reaction to annakata: Yes, but you want the result of the dialog box to be used by the browser. So you might think using 'return bFlag' would do the trick (or event.returnValue = bFlag), but that gives you a second dialog box.
I've found a way around, thanks to this page. It's quite simple actually:
var onBeforeUnloadFired = false;
Use this global variable here:
if (!onBeforeUnloadFired) {
onBeforeUnloadFired = true;
event.returnValue = "You'll lose changes!";
}
window.setTimeout("ResetOnBeforeUnloadFired()", 1000);
And then implement that function:
function ResetOnBeforeUnloadFired() {
onBeforeUnloadFired = false;
}
So, in effect, use the flag, but reset it if the user clicks cancel. Not entirely what I would like, but haven't found anything better.
I haven't encountered this, but surely you could set the flag variable to be equal to the result of the dialog? If the user cancels the flag will therefore remain false.
var bFlag = window.confirm('Do you want to leave this page?');
IE supports an event on the document object called onstop. This event fires after the onbeforeunload event, but before the onunload event. This isn't exactly pertinent to your two dialogs question, but its still relevant to other people that might stumble on this thread ( as I did ).
The problem I was having, was that I needed to display a loading message upon the onbeforeunload event firing. This is all fine until the page has some sort of confirm dialog on it. The onbeforeunload event fires even if the user cancel's and remains on the page. The easiest thing for me to do was to move my "loading" display logic into a handler for document.onstop. On top of this, you have to check the readyState property of the document object, which is another IE-only field. If its "loading", it means the user is actually leaving the page. If its "complete", it means the user is staying.
If you are fine with just using IE, then you might be interested in the following.
document.onstop = function()
{
try
{
if( document.readyState != "complete" )
{
showLoadingDiv();
}
}
catch( error )
{
handleError( error );
}
}

Resources