I am implementing Google One Tap in my website, however I am unable to prevent the popup from spawning immediately after the logout. I know I could manually set a cookie for that, however the official documentation suggests to add the class g_id_signout to any link or button used for the logout. In my menu I have this entry:
<li>
<a id="public-logout" class="g_id_signout" href="#logout"> <wk:text
name="public_area.logout"/></a>
</li>
but the popup still shows immediately after the logout. For reference, the "X" button on the One Tap popup triggers the cooldown regularly. Any idea?
Is the link dynamically created after Google One Tap library loaded?
If that's the case, the library cannot add correct event handler to this link.
You can try to add the click event handler by yourself with the example code below:
<li>
<a id="public-logout" onclick="google.accounts.id.disableAutoSelect(); return true;" href="#logout"> <wk:text
name="public_area.logout"/></a>
</li>
Or, you can bind the click event hander by JavaScript code.
More details at: https://developers.google.com/identity/one-tap/web/reference/js-reference#google.accounts.id.disableAutoSelect
Related
I'm trying to set up a click event for a certain button in GA4 Analytics in GTM, but the event does not fire in the preview.
The button has a specific ID. I can see the ID in the DOM, I can see that the gtm.element contains the ID in the API call, but the debug information shows that the Click ID does not match.
I've tested with my front-end developers that the event click events are propagated through the DOM. On a simple image where I've set up the click event in the same way the click event is properly registered.
Any insight in how to solve this is greatly appreciated.
From you screenshots. Looks like GTM detect the click is fired on the <span> inside the button you want.
For this kind of case. I would suggest to use click element as your trigger.
Here is the selector
button#ga_welcome_start_print_job, button#ga_welcome_start_print_job *
This means we want to track the click for the button and all the element inside it.
TLDR; wrap text in an attribute that has id property. Make a custom variable in GTM, of type 'Auto Event Variable' -> Variable Type = Element ID. Then assign to tag.
I had a similar situation. I was using React MUI's Button and I noticed that the id attribute wasn't actually being assigned to GA4's elementId. My guess is the id attribute wasn't 'bubbling' up or it was being processed somehow in MUI which conflicts with GA4. Anyways, I literally just started using analytics, so here's what I did to get it working.
I had a MUI button with the following setup
<Button
id='location-filter-tag'
className='reco-filter-button'
variant={searchState === 'cumulative' ? "contained" : "text"}
size="small"
onClick={() => {
setQueryType('cumulative');
}}
>
<h6 className="some-class">
Location
</h6>
</Button>
Checking the the push event gtm.click below, you can see the id='location-filter-tag' is concatenated into one big string. under gtm.element.
At the time, the gtm.elementId was an empty string (image is of working instance)
I tried to hook into gtm.element and trigger the tag using contains = location-filter-tag but that didn't work. So I moved the id property to the child attribute to get it to register with GA4's gtm.elementId
<h6
id='location-filter-tag'
className="text-overflow reco-filter-text"
>
Then in google tag manager, I setup a variable like so:
Then I assigned it as a trigger. This is my location trigger
hope that helps.
I am using zorro antd to implement multiple tabs feature, I would like to warn my user when they have unsaved changes, and only leave the tab if the user confirms. Seems there isn't a callback before leaving the tab, (nzSelectChange) is the call back after tab changed instead of before. So how can I implement a feature like this using nz-tabset of zorro?
NzTab has a (nzClick) EventEmitter to handler the tab title click event, but it does not emit the native mouse-event, so we cannot capture the native event. But I found the nz-tab [nzTitle] property can be a TemplateRef, so we can build our tab title and handler the click event before triggering tab-set's (nzSelectChange). For Example:
<ng-template #tabTitle1>
<div (click)="beforeActivateTab(0, $event)">Tab 1</div>
</ng-template>
And, I build an online example you can visit here:
https://stackblitz.com/edit/ng-zorro-antd-start-drc5uf
with Google Tag Manager Auto-Event Tracking (dataLayer.push), I want to track this information:
the name of the links clicked in my menu, for example:
<ul class="my-nav">
<li>
Anoter site
</li>
</ul>
so: 'Another site'
I want to push the name of the parent link name of the clicked link with this structure:
<li>Linkname
<ul>
<li>
Website name
<li>
<ul>
<li>
So there: I want 'Linkname'
the 'status' of a toggle link - whether the element has a class 'open' or not
<a class="content-toggler open" href="#">Hide all the content</a>
I have read through many tutorials and walkthroughs, but most talk about tracking links that go to external sites in general, or submit events and so on.
Here I want to track the name of a link in a certain dom tree.
And I want to track the element 'status' with a certain class.
Please explain how this can be achieved, or refer me to articles that have an example to
this kind of events, not only to general walkthroughs.
Many many thanks!
Let's start with the last one.
1) What you have to do it to create a link click listener (new tag-->tag type-->Link click listener) and run it on all the pages (or only the pages where it is relevant). This will generate an event for GoogleTagManager that you an use in a rule.
2) Create a rule like the following. This will trigger an event that we will do in the next stage
3) Set an event like the following. Note that I added an element id. If you have more than one toggle open link, you need to find a way how to distinguish between them on google analytics. ID could help you. Also note that using gtm you can only use the classes, not one specific class. (as far as I know)
Now let's go back to the first one. You can use the same method used here above, but instead of putting the {{element classes} as the value of the event, you can create a new macro that will employ the inner text of that link (gtm.element.innertext). On how to do it, read here: http://www.swellpath.com/2013/10/google-tag-manager-inspecting-andconfiguring-auto-event-tracking/
For the second one, you need the innertext of a third level parent. I'm not sure how to implement it other than using javascript that will call an event through the data layer.
So I would suggest a solution like the following:
Create an event on GTM that listens to events that are pushed via the data layer.
On how to do this, go to this post: http://moz.com/ugc/tracking-google-analytics-events-with-google-tag-manager
Start with "Tracking Google Analytics Events with GTM: The Second Way" and do steps: 1,2 and 3.
Create javascript code that is executed when the link is clicked. This JS will take the text of that 3rd parent element whenever that link is clicked. Again, I suggest to provide IDs so the task will be easier.
Then, the same JS code should then run this code
dataLayer.push({ 'event':'GAevent', 'eventCategory':'Navigation Clicks', 'eventAction':'Menu Item Click', 'eventLabel':'Outbound Click', 'eventValue:***YOUR 3RD LEVEL PARENT TEXT HERE***});
Then the event with the value is registered via google analytics.
Note that all the names I gave for the event values in my reply are based on my understanding of your needs. You will need to adjust them to what you want to achieve with this event tracking.
Is there a way to open a page in XHTML without using <a href="page.html" target="_blank"> that is standards compliant?
I'm not using frames, but there are some pages that I want to open in a new window instead of the current one.
You can use javascript's window.open() method. However this could easily be blocked by a pop-up blocker. Why do you not want to use the "_blank" target?
You can use something like this:
My Page
And then you run this jQuery:
$(document).ready(function() {
$('a[rel="external"]').attr('target', '_blank');
});
This will add the target="blank" to the links and make your HTML validate :)
Most pop-up blockers wont block a pop up that has been requested by the user e.g you click a link and it pops up a window. IF you add an onlick event to your link and a target, the desired effect will work even if JS is turned off although you don't want to use target="_blank"
I've implemented a menu for my asp.net page containing some hyperlinks and loading different contents on their clicks, it's using jquery on behind for it's style mostly and it is working fine. But the problem is, what if a refer to this menu from the outside, i can refer to each of the menu items, i pass parameters on querystring, now i can find which item is clicked but how can i force that hyperlink menu item to be clicked on page load. I'm specifing just their navigation urls, how can i specify that if something is passed in querystring than that specific menu item should be forced clicked on pageload.
Any ideas? Thanks in advance.
The real question lies can you cuase a hyperlink click event?
Now I'm using
Page.ClientScript.RegisterStartupScript(typeof(Page),"test1", "<script>document.getElementById('linkButtonId').click();</script>"); but still nothing desirable happens, seems that this row has no effect at all.
Whether the functionality being executed is client side or server side, it might be a good idea to create a function that will accept the id or something of the menu item being clicked and then handle it appropriately.
Thus all the menu items will call the same function. And since you have the parameters in the query string just pass them through to the function which will handle it accordingly and display the correct content?
You need a bit of separation...
Whatever your click does can be moved into a function, then you can call the function on the click of the menu - but you can also call the function at other times as well.
Before:
<a ... onclick="alert('hello');">Click Me</a>
After:
<a ... onclick="fnSayHello();">Click Me</a>
...
var fnSayHello = function() { alert('hello'); };
fnSayHello();