I want to track button clicks, which lead to external website. I want to put them in Google Analytics Goals.
Is there any option to this without Google Tag Manager?
You can include a separate .js file that listens for all link clicks on your website. Whenever a link click occurs check if the hostname matches your website. If not use the global ga() object (If you have added the analytics.js library snippet in your site) and send an event to google Analytics. The command will look like the one below
ga('send', 'event', 'outbound link', '{link text} - {link href}');
where {link text} is the text of the link and
{link href} is the href that the link points to.
Rather than write a bunch of extra code, you can follow this guide. Pretty simple. Your link text could be (most likely will be) different throughout your entire website. GTM will simply track every single click and report on it.
http://mediacause.org/track-button-clicks-google-tag-manager/
Related
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).
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.
I am using this guide to better understand how calendar events can be created with HTTP GET requests for Yahoo and Google Calendars. The "Add to Google" calendar link on that page works perfectly for me (opens my Google calendar with a new event with information populated automatically). When I take the format of the link and add my own information, or even just copy and paste the exact same link into my own application, it stops working correctly. My Google Calendar opens with a new event form, but none of the information is being populated correctly. Here is the link as used in the guide:
http://www.google.com/calendar/event?action=TEMPLATE&text=Joe's+40th+Birthday&details=Joe+turns+40+just+this+once&dates=20111212T190000/20111212T200000&location=Gillette+Stadium
Anyone know why this would just stop working when accessed in any way other than clicking on the link in the guide?
The URL above has several & symbols in it, meaning the Google Calendar page is not getting the parameter names it is expecting. When you remove & and replace them with a plain &, it works as expected. Without seeing your code, I would you suggest you try adding .html_safe to the end of whatever you are using to generate the URL.
So I have been looking into this for a few weeks and have come up with nothing!
I work on the website for my families music store, and have been asked to add a "Links" page to the website. My goal would be to have the categories of our vendors (i.e. Violin, Guitar, Piano, etc.) on the left of the page and when the category is selected the links come up on the right. That part I have. The tricky part here is: When a link to a vendor (i.e. Fender, G&L, Yahmaha) is clicked instead of taking them directly to the site, I want it to take them all to the same page, but embeded on that page is the site.
I have done a lot of research on this and have come up with nothing. I could just go through and make a new page for each of the vendors, with the embedding on each individual page, but that is extremely time consuming with the amount of vendors.
Is something like this at all possible? I've been playing with embedding itself and have that down. It just comes down to, which link did they click, and loading that specific page.
If there is any more information you may need to help or point me in the right direction please let me know! Same with any code that may be helpful!
I've come up dead on all my research on this.
EDIT: I guess my ultimate goal is that it will look something like this: http://answers.yahoo.com/ so that the vendors website is open on bottom, but our stores banner and links are still at the top. Out website can be found here: http://www.brassbellmusic.com/default.aspx
I've created a JSFiddle to demo this functionality using jQuery.
We iterate through the list of brand links in the ul:
$('#brandListing a')
Capturing a click event on each:
.click(function(ev){
jQuery passes an event object to the anonymous function (ev). When the link is clicked, we first must prevent the default action, which is to follow the link. Then we update the src attribute of the iframe (the "embedded page") with the value of the href that was clicked:
ev.preventDefault();
$('#embeddedBrandWebsite').attr('src', ev.target.href);
You'll need to add the jQuery library to your page to use my code sample, but it's possible to replicate the functionality without it.
EDIT
The sample above is for a single page implementation, where links and the embed are on the same page. To achieve the requested "transfer of information," I recommend passing the target href as a GET parameter (brassbellmusic.com/brandEmbed.aspx?path=http%3A//www.gibson.com/). On the single "embed" page, you can then extract this either on the server side to set the iframe's src, or using javascript. With javascript, you might use:
function getURLParameter(name) {
return decodeURI(
(RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]
);
}
Source
And then after your document is ready, set the iframe src using getURLParameter('path').
I have a registration system on my website which uses the common activation email trick.
This email simply contains instructions and a link to the activation page on my website.
So suppose I registered on the site, opened a new tab to check my emails and then clicked on the link, which will open in another new tab, resulting in two tabs open on the site (of which one is btw still telling them to o check their mail).
Is there a way to get the link in the email to open in the first tab on my website? (Or open a new tab if the previous one was closed or moved to another domain).
Thanks for any help/suggestions!
You can name your current window/tab with a JavaScript assignment:
<script type="text/javascript">
this.name = "mainWindow";
</script>
Then you use that name as value for the target attribute in links, like
<a href="nextPage.html" target="mainWindow">...
If mainWindow does not yet (or no more) exist, it will open in a new tab.
Update
The above stuff does not solve the OP's problem, because for links opened from emails, the target attribute will usually not be transferred from MUA to browser (except maybe for webmailers, but we cannot rely on this). So I was thinking of some kind of landing page which uses JavaScript to achieve the desired effect:
If target window/tab `mainWindow` has already been opened, focus it, perform activation there, and close ourselves.
If target window/tab does not exist, perform activation right where we are.
If this worked, you would only see a second open tab for a moment (case 1), before it closes itself. Yet it is not possible to "close ourselves", as I learned here and here - so in the end there would be a superfluous tab left, which should have been avoided. Seems like it cannot be done, sorry!