GA4 Google Analytics event doesn't appear as conversion - reactjs

I'm using Google Tag Manager(react-gtm-module) package) to push custom events to Google Analytics. In code i do it like this:
GTM.dataLayer({ dataLayer: { event: 'Custom event' } });
Then, in GTM i have trigger for this Custom event (event name is the same everywhere) and tag which sends event to Google Analytics. Then in GA i marked that event as conversion, but when i trigger that event on website it shows up as regular event but not as conversion.
This works perfect for every other event but not for this one. I tried to rename event and mark new event as conversion but it didn't help.
Could anyone by any chance know the reason why it doesn't work as expected only for this event?

I am not sure follow the actual issue you are having but you're missing a ' in your code after the event name
this
GTM.dataLayer({ dataLayer: { event: 'Custom event } });
should change to
GTM.dataLayer({ dataLayer: { event: 'Custom event' } });
Otherwise, are you saying that you are specifically using the string "Custom event" as the event parameter value? Perhaps that is a reserved value in the system used for something else, but it seems unlikely.

Related

Trigger event on selection mail item or change selection of mail item

I am trying to create a outlook plugin in React JS to detect mail selected or mail selection change.
Tried Mailbox EvenetType ItemChanged, add handler for event is return success but handler not called when user select or change selected mail from list.
The code I used is as below
Office.onReady(() => {
// If needed, Office.js is ready to be called
Office.context.mailbox.addHandlerAsync(Office.EventType.ItemChanged,
(eventType) => mailItemChanged(eventType),
(AsyncResult) => {console.log(AsyncResult)});
});
function mailItemChanged(eventType) {
console.log('Office.EventType.ItemChanged triggered');
}
Please let me if there is any other option to trigger email selection change event
This event was introduced to update the pane when selection is changed. The web add-ins work under the context of item selected in Outlook. So, it is expected to get the event triggered when the task pane is pinned.

angular calendar detect month change event

I have the following issue while using the angular ui calendar component, as when the page loads I have like 60 records (full of information) I pull off the DB and this makes the reloading really awfull.
I realize I could detect when the user switches from one month to another and so load only the records corresponding to that month (According to the view).
Is there any angular ui calendar event to detect or be aware of this ?. Thankx !.
This is pulled from docs:
Custom event rendering
You can use fullcalendar's eventRender option to customize how events are rendered in the calendar. However, only certain event attributes are watched for changes (they are id, title, url, start, end, allDay, and className).
If you need to automatically re-render other event data, you can use calendar-watch-event. calendar-watch-event expression must return a function that is passed event as argument and returns a string or a number, for example:
$scope.extraEventSignature = function(event) {
returns "" + event.price;
}
<ui-calendar calendar-watch-event="extraEventSignature(event)" ... >
// will now watch for price
In the docs, it is advised to use viewRender callback:
There is no mechanism to $watch the displayed date range on the
calendar due to the JQuery nature of fullCalendar. If you want to
track the dates displayed on the calendar so you can fetch events
outside the scope of fullCalendar (Say from a caching store in a
service, instead of letting fullCalendar pull them via AJAX), you can
add the viewRender callback to the calendar config.
$scope.calendarConfig = {
calendar:{
height: "100%",
...
viewRender: function(view, element) {
console.log("View Changed: ", view.start, view.end);
}
}
};

Trigger Google Analytics pageview for Angular App while using Google Tag Manager

I am building a SPA using Angular.js. We use Google Tag Manager to load in most of our analytics/marketing scripts, which includes Google Analytics. I am also using ui-router to manage states/views.
I would like to send pageview events off to Google Analytics whenever a user browses to a different state in my app. Part of the complexity in doing this with GTM is that GTM creates a named tracker. That means that all GA events need be prepended with the tracker name. That would usually look like this:
ga('trackerName.send', 'pageview', {page: '/a/path/', title: 'A Title'});
GTM uses a randomly generated tracker name, so the tracker name needs to be grabbed at runtime. That can be done fairly simply with GA's getAll function. If you want to send the pageview event to all trackers, you would simply do:
var allTrackers = ga.getAll();
for(var i=0; i<allTrackers.length; i++) {
ga.send(allTrackers[i].getName()+".send", "pageview", {page: '/a/path', title: 'A Title'});
}
This works great for most of my pageview events. However, there is a race condition between when ui-router fires the initial view's $stateChangeSuccess (which is where I trigger the GA pageview), and when analytics.js is loaded.
Prior to analytics.js being loaded, Google Analytic's snippet creates a faux ga object, that you can send events to. This faux object does not have the rest of the ga functions on it, so you can not run getAll. Without the getAll function, I cannot get the tracker name and I cannot send pageview events.
As far as I can tell, Google Analytics does not provide any callbacks or events for when analytics.js is finished loading, so there is no way to tell when I will be able to start sending events. Right now I am using an $interval to check for the existence of ga.getAll, but that is not a very performant or ideal solution. This is what I've got:
gaCheckInterval = setInterval(function() {
if(typeof(ga) !== 'undefined' && typeof(ga.getAll) == 'function') {
clearInterval(gaCheckInterval);
sendBackloggedEvents();
}
}, 200);
Is there any other way to recognize when analytics.js has finished loading? Or any other way to send events to a named tracker, without having access to getAll?
Attempting to configure and trigger individual trackers circumvents the purpose of using a tag manager. Instead do:
dataLayer.push({event:'spa.pageView', page:..., title:...});
Where:
dataLayer is optionally renamed in the gtm snippet
spa is a handy abbreviation for your app/project/company/whatever in case you need to distinguish its actions later.
page and title can be whatever you like, you will reference them by adding dataLayer macros in your GTM container.
Then, in the tag manager you configure:
rule of {{event}} ends with pageView.
dataLayer macros for the page, title you are pushing into the dataLayer.
UA Tag (and later whatever else) to fire (1) and use the macros in (2) for the TAG parameters they override.
Repeat (3) as many times as you like for different UA properties with additional blocking rules, alternate macros or more granular firing rules as necessary.
Now you can configure the specifics and add other tag types that reuse the rules and macros without modifying the application for each change.

How to add a keydown listener to Ext.field.number?

I wish to add a keydown listener to a number field in Sencha Touch 2 to dynamically check the field for errors rather than waiting until the form is submitted. The number field is a component on form. Looking at the official documentation, only the keyup event can be listened to.
Is it possible to listen to the standard javascript keydown event and define this custom listener in the initialization function of the form?
You can add a listener to the input field:
numberField.getComponent().input.on({
scope: this,
keydown: 'onKeyDown'
});
Then define what you want to do on the method 'onKeyDown'
onKeyDown: function(e, obj) {
//Your code here
}
Be careful, I've run into numerous problems trying to use keyboard functions on different devices, particularly with Android. After many struggles with this and the lack of standards on number fields I found building a number pad for data entry (as opposed to the various device keypads) was a better solution. Hope this helps.
Have you tried the addListener method?
numberField.addListener('keydown', function(){
alert("key down");
});
http://docs.sencha.com/touch/2.4.0/#!/api/Ext.mixin.Observable-method-addListener

find which event is triggred in backbone js event callback function

obj.on('evt_A evt_B evt_c', function(eventData){
console.log("Is it possible here to find which event is triggered. As this callback is registered for three events. This callback is like a central callback for all the events on this object.")
})
obj.trigger('evt_A evt_B evt_c', [{eventDataForevt_A}, {eventDataForevt_B, {eventDataForevt_C}}])
There is one way of doing it, which is having a property in eventDataForevt_<A||B||C> which says the name of the event. But is it possible to do this without modifying the eventDataForevt_<A||B||C> ?
Check out this fiddle: http://jsbin.com/ucevov/4/edit
It doesn't seem possible to detect the event name from your obj.on - note that evt_c in this._events is true even when evt_c is not called.
However there is a special "all" event which passes in the name of the calling event as the first parameter, so
obj.on("all", function(eventName, eventData) {
console.log(eventName);
});
should output the name of the event that was called.

Resources