I work on a one single page application (360 virtual visit) with Angular 11. I would like to track user events and especially on buttons.
I started to put the Global site tag in my Index.html file like this: Global Site tag in Index.html
On google analytic, I receive connection data user First Data User
But I have no idea how I can track bouton click with Angular.
Does anyone have an idea that works today ?
do not hesitate to ask me questions for more information. :D
Thank you in advance for your answers. I would share my progress.
For something like Button Clicks, you have to configure custom events in Google Analytics and push that custom event whenever user clicks the button.
You can create onButtonClick() function and call it when user clicks the button. In the function, you should push event to the window.dataLayer:
onButtonClick() {
window.dataLayer.push({
event: 'button_click',
data: {
user: this.current_user._id,
... // Send some custom data that you want to track
}
})
}
You should be careful with SPA when you install gtag the way it is described into docs as it will track page views incorrect. In SPA browser loads the page only once, and all other actions will rerender the content but it still will not be counted as a views.
Instead you will need to set up router events. Here is a great tutorial for that. It also will explain how to set up other events like button clicks.
By the way in the example above they suggest to send user id with event. Instead of it you may send it with config only once, and it will be automatically added to any your event:
gtag('config', 'GA-ID', {
page_path: event.urlAfterRedirects,
user_id: this.user.id
});
You need to configure the Google tag manager to send events to Google Analytics. I've written a post about it: https://pieterjandeclippel.medium.com/angular-or-react-or-whatever-and-google-analytics-97342c909e61
Now it seems that Universal analytics will be on its way out, so you might want to try GA4 instead.
But I haven't tried with that one yet, since my own website has been configured to use UA.
We've added the same feature recently and this guide here, albeit a bit dated, explains it quite well.
It boils down to you using a dedicated GoogleAnalyticsService that enables you track specific events (ie. button clicks, scroll events, etc).
Related
Mypage.html
<div class="seven"><button onClick="Submit()">submit</button> </div>
<script type="text/javascript">
function submit() {
google.script.run.scores(document.forms[0]);
}
</script>
....
Javascript.gs
function scores(form){
Logger.log("I am called")
}
The above code works perfectly, however each time I click button, I want the HTML Templated/deployed webpage to load/reload/refresh as well...
I tried adding
google.script.run.scores(document.forms[0]); (continued from above code, hence line repeated))
google.script.host.refresh (basically got the idea from host.close)
google.script.host.reload
google.script.host.load
Please can someone help me to get the proper code by which onClick of the button the scores function is called (at present working) along with the page being refreshed.
Note: I want it refreshed, reason being - on submit, data is pushed to GSheet which is again called in a dropdown on refresh....
Thanks in advance....
As far as I know, there is no way to refresh the templated HTML in GAS.
Even if you could, this would be similar (albeit an extremely slow version) of a "refresh"-style website where you have to continually pass data back and forth from the client to the server and then back to the client in rendered form which is very slow and inefficient.
Every-time you perform a server-side action (google.script.run...) google's cloud servers have to load the application state, perform the function and then terminate.
My suggestion (as I am working on a product which requires a bit of templating) is to simply use client-side javascript to render and re-render your UI.
I primarily use jQuery but it is very verbose and time-intensive compared to great javascript templating engines out there such as KnockoutJS.
If any SO users have found a better way to make responsive and interactive UIs in GAS please let us know!
Is it possible to add an event directly to a user's calendar (be it google, iCal, Outlook) with AS3? I work at a major network and my boss wants to add this functionality to our Flash banners to help promote our TV shows. The best I can think of is having a button that links out to a .ics file the the user downloads and adds manually, but I'd like to avoid having the user do anything other than click on a button.
Any advice/direction is much appreciated. Thanks!
You would need to develop some kind of mediator that takes your request and then translates it into platform specific API calls (if any exist). For example, you would need to use the Google Calendar API to add events directly into a Google Calendar.
When I login to a site, which is a "learning system" at my university, I have found that I cannot open a new tab with the same site open. When I do so, somehow the site is aware and displays the following message?
How on earth does the site know what tabs I have open on my computer? As far as I know, the front-end code shouldn't have any access to my private browser information. What accessible information could this site be using to determine that I have another tab open already?
I am accessing the site using a private computer, and the site being accessed isn't on a local network, it is being accessed through the internet. Therefore there is no internal monitoring software that could be causing this. I am using Google Chrome 24 Beta for Mac.
One way to do this is via cookies and ids. Firstly, you are logged in to the site and have a session on there. This is managed using cookies; whenever you visit a page on the site, your browser will send a cookie which normally contains some kind of id. That way the server can identify any request coming from you, is really from you. So, in this case, both your original tab and your new tab will send the same cookie.
Secondly, it can also add another, different id (call it the page id), to any link or form you submit on the site. So a form on a page might contain the id 1234, and any links will also contain that id. Each new page you visit might contain a new id. So at any point, the site knows that next request from your browser (identified by the cookies) should also contain this other id. If you navigate around the site in a normal way, clicking on links, submitting forms, this will be true and all will be good.
Cases when your next request would NOT submit the expected, second id are:
you hit the back button (you would be sending an old page id)
you open a new tab (this depends on the browser, but if it opens the
same page you are already on in the original tab, it would be sending the current page
id, not the next page id, which the server expects)
Either way, you send a request with a page id the server doesn't expect and it can make a best guess as to what you did.
They track your mouse cursor movement while visiting their website. It's a great way to get the attention of a visitor. They put some query programmatically when you move your mouse and when you wish to close.
It's good UX.
Another way the site may know that you have another tab open is through broadcasting channels. To put it simply, broadcasting channels are a means for windows, tabs, etc; to communicate (correct me if I am wrong). Here is a simple implementation:
//Channel to post and receive messages from
const bc = new BroadcastChannel("Check-tabs");
//On message receive
bc.onmessage = (event) => {
if (event.data === `First tab?`) {
//Post that there is already a tab open
bc.postMessage(`Tab already open`);
}
//Check if a tab is open
if (event.data === `Tab already open`) {
alert(`Another tab is already open.`);
}
//Posts message to check whether another tab is open
bc.postMessage(`First tab?`);
I'm creating an extension for Chrome, and one of the functionalities included is the ability for the end user to add people as contacts.
Currently, the contact is saved to the database via AJAX, after which a desktop notification is displayed telling the user that the deed has been done.
However, I would want to first ask the user if he's sure he wants to do that. So I got the mad idea of wanting to create a new notification from within a notification.
So first, the confirmation HTML notification would be created from the background.html, and displayed. It contains a button, and upon clicking it, it should run the AJAX function and create a second notification, containing the feedback.
However, I seem to be unable to do this. I can't run createNotification() from the notification, sendRequest() doesn't seem to go through neither, and I can't use the onClose listener from background.html, because I want to differentiate between clicking the "Yes" button and the "No" button.
Is there any way I can do this? And if not, how should the confirmation dialog be implemented instead?
Have you tried using chrome.extension.getBackgroundPage()? This may provide the access to your background page's API that you require. For example, your first notification page calls the following when Yes is clicked;
function yesClicked() {
chrome.extension.getBackgroundPage().showSecondNotification();
}
The background page declares the showSecondNotification method as follows;
function showSecondNotification() {
webkitNotifications.createHTMLNotification(
chrome.extension.getURL('notification2.html')
).show();
}
Hopefully, this will cause the second notification to be displayed. I've used a similar method in my extensions before but only to retrieve information from the background page. However, I see no reason this shouldn't work.
I am starting my internship on a Home Server able to control mutliple domotics equipments from a web page. The global idea is that based on a click on a button, a certain script is spawned on the server and controls a microcontroller.
My tutor built a simple website he gave me, using AJAX to always stay on 1 page, and brings the menus according to user actions (they are hidden if not used, brought back to front if used).
I have set up an apache server which I configured to execute CGI scripts, and it works.
To always stay on one page, I used the '204 No Content' return trick, so that the server's answer to the page is 'I don't have anything to say, just stay on this page'.
But the one problem I have is that the CGI is launched only once. If I click the button for the first time it works, afterwards nothing happens.
I tried using the SSI (shtml) to use the in a button code instead of using a FORM with GET method but the script still won't execute twice.
I might be using the wrong tools. Should I keep going with CGIs ? Or is there something else (like AJAX, jquery) that actually is designed to do what I want ?
Thanks for having read.
EDIT : I have found a way around it (it's always when I'm desperate after looking for days for an answer that I go to forums and then find myself a nice solution in the next hour .... )
I used a basic link, and for some reason it has a different behaviour than using a button. Whatever. My interrogations on the technologies used still stand though :)
EDIT2 : My solution is crappy, for some reason the script is also called at page refresh (or when the page loads for the first time). It's strange, because since it's in the it should only be spawned when I click on it ...
Familiarize yourself with jQuery and its AJAX API. You can't make it not load a new page unless you use AJAX. Here is an example of what an AJAX call looks like:
$.ajax({
url: 'http://server.domain.com/cgi-bin/myfile.cgi',
data: {
x: 1,
today: '20110504',
user: 'Joe'
}
}).success(function(data, status, xhr) {
if (data)
alert(data);
});
That is for jQuery 1.5 or higher. You can run that whenever a certain button is clicked like this:
HTML for the button:
<input type="button" id="doThis"/>
JavaScript:
$(function() {
$('#doThis').click(function() {
//put AJAX sample shown above, here
});
});