I have set up Matomo Tag Manager on-premise. My goal is to have events that trigger user clicks but with a variable event action or name. This variable comes from an attribute of the clicked object.
For example, the clicked object is <div eventId="test"></div>.
I want the event name to be the eventId.
This is very useful because we have hundreds of events, and I don't want to create them by hand.
Any thoughts on this?
I think you can make use of the HTML5 data-attributes and access them through the Matomo Tag Manager Javascript API.
Step 1: Add your attribute to the clickable element (e.g: data-eventId = "test")
Step 2: Create a custom JS variable in the tag manager like this:
function () {
if (TagManager.dataLayer.get('mtm.clickElement')) {
return TagManager.dataLayer.get('mtm.clickElement').getAttribute('data-eventId');
} else {
return 'false';
}
step 3: Use this variable to build your triggers and tags.
Resources to help you
https://www.mikkopiippo.com/matomo-analytics-event-tracking-using-data-attributes/
Related
I'm a React developer and I barely knows how GTM works as it's not my field.
What I understand is
There are triggers on google tag manager
GTM script will find HTML elements of the triggers by defined css selectors(in my case) and tag them(put GTM attributes) when it's loaded in the page
When an event meeting the condition of a trigger occurs, the trigger will execute defined javascript(in my case)
The problem is that HTML elements possibly don't exist when GTM script is tagging because they can be created by a user interaction. And I want to tag such elements by using GTM's lifecycle method(if exists). Is there any way to do this or at least a workaround?
The best practice I can come up with is something like :
When you render the element you want to track in the React.
Let React push the datalayer about the information of the element like
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: "element_render",
element_id: "#id",
element_type: "type",
any_paramter_you_need: "any_value_you_need",
})
So you can set up the Trigger in you Google Tag Manager and the type is Custom Event
Usually that should work out of the box. GTM does not tag elements directly. Instead, GTM is attached to the document root. If an element is clicked, the event bubbles up to the document root, and there GTM checks if the properties of the event target (the actually element interacted with) meet the conditions defined in the trigger.
So unless React is doing something super crazy with the document, you should be safe. Allowing to track dynamically added elements is pretty much the point of this design.
For visibility triggers, you specifically need to enable this behavior by clicking the checkbox on "observe DOM changes". There is a warning that this might impact page speed.
I some links in my application which I want to track the click on those links with the help of GTM. Imagine I have a link to download page like this
<a ui-sref="main.download">Download</a>
I create a tag of type 'Universial Google Analytics' for this click named MainDownloadLink.
How should I define a trigger to fire this tag when that link is clicked? Also note that I don't want to use angularitics library. Imagine that I have no control over the source code. just GTM panel.
I define a trigger of type Clicks-Just Link and I am confused for the condition when this event should be fired.
any help is welcomed.
You must make sure that "link validation" is disabled (since GTM does not consider links without href to be valid).
As long as your links are actually named "Download" it probably would be easiest to use the built-in "click text" variable and set a filter "if click text equals download" on your link trigger.
Else you might want to try to access the "main.download" attribute. The built-in click element variable returns the clicked DOM element, so you'd create a custom variable
function() {
return {{Click Element}}.getAttribute('ui.sref');
}
and then test in your trigger if "{{your custom js var}} equals main.download".
Untested, but basically this should work.
I am using GTM to fire Adobe Analytics scripts on all the pages. It is working as desired. However I am wondering if is there a way to set up click events with no page refresh, in the same way as Google Analytics click events are set up. I am using s.tl() call however it is not sending the events to adobe omniture. Any thoughts on this. I know if I use DTM, it can be setup easily.
Assuming that you have Adobe Analytics already present on your website, s object is already present on your website. All you need to do is to put these codes on your website and fire this using GTM as a custom HTML Tag on basis of the trigger you require. There are standard events like gtm.js, gtm.dom and gtm.load already present. You can create your own custom event on top of this on basis of elements load. Using the same event you can fire these lines of codes on your website and this should give you what are you looking for.
<script type = "text/javascript">
var s = s_gi('yourreportsuiteID'); // replace this with your RSID!
s.visitorNamespace = "yournamespace" //optional
s.trackingServer = "yourtrackingserver" //optional
s.trackingServerSecure = "yoursecuretrackingserver"//optional
s.events = "event35";// your event number has to be activated in Adobe
s.linkTrackVars = "events,eVar38";//your eVar number has to be activated in Adobe
s.linkTrackEvents = "event35";
s.eVar38 = {{GTMVariable}}
s.tl( this,
"o",
"FriendlyName" );
</script>
There is nothing specific to Adobe Analytics to consider - GTM has a built-in click event handler. Go to "triggers", "new", select "click" from the options and optionally specify filters (e.g. if you want the trigger to fire only on certain pages, or only when the link has a specific class).
Assign the trigger to a custom HTML tag with your Adobe Code, save, publish and you are all set.
I have an app made with ionic-framework.
I have a button that makes a user follow another user. The button posts to the API and it saves.
In the ion side menu, I list all the people I follow, which I get from the same API.
However, when I follow another user, the ion side menu doesn't update as it is cached I suppose. How do I make it update once I follow another user?
Thank you.
Users profile controller
$scope.toggleFollow = function(bool)
{
$http.post('http://localhost:26264/api/follow?userId=' +$stateParams.userId +"&toggleFollow=" +bool);
}
Left menu controller
$http.get('http://localhost:26264/api/follow').then(function(resp) {
console.log('Success', resp);
$scope.alternatives = resp.data;
Then I just loop out the $scope.alternatives in the left menu like
<ion-item ng-repeat="alternative in alternatives" href="#/app/user/{{ alternative.id }}">
{{alternative.name}}
</ion-item>
You need to update $scope.alternatives
For that, as we don't know your logic and code.
You can do the following :
Solution 1: Creating an event emiter & receiver :
From first controller : you can $rootScope.$broadcast("myEvent",{info : myNewAlternativesInfo});
From Second Controller : $scope.$on("myEvent",args){ //update as needed alternatives with access to args.info
Solution 2: access to data from a service
Both controller update and access to values from a shared Service
Then you just need to add on your second controller a watcher on the desired value to check when it updated $scope.$watcher
If that's not enough to lead you to solution, gives us more info ;)
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.