I want to create a variable in GTM which returns the element which is closest. In a javascript tag it can be done this way:
function() {
return function(target, selector) {
while (!target.matches(selector) && !target.matches('body')) {
target = target.parentElement;
}
return target.matches(selector) ? target : undefined;
}
}
To make our website CSP compliant custom JS tags aren't allowed and we should create gtm variable templates.
The issue with a GTM template is you are not able to pass {{click element}} so I am looking for a method on how to access gtm.click from the datalayer and execute the closest function on that.
https://www.simoahava.com/analytics/custom-templates-guide-for-google-tag-manager/#restrictions-to-what-type-of-data-you-can-handle
Is the only way I am able to do this by injecting a script? I would rather fix this by using one of the gtm template api's.
Related
I am new to Google analytics and Google Tag Manager and currently I am confused with using external JS libraries. Any help would be appreciated.
I need to use 'https://cdnjs.cloudflare.com/ajax/libs/fingerprintjs2/2.1.0/fingerprint2.min.js' in my custom javascript code in google tag manager. I have tried to include the script as a custom html or even custom template. The script is successfully added to the head and I see it in the inspection. But in my custom JS code , when I try to call and use library functions , it throws exception saying that the lib object is not defined.
I tried sequencing tags also , to make sure script loading tags are fired before my custom js code execution. But that did not fix the problem.
Any suggestion on how to include external JS libraries in your GTM custom JS code? I hope I explained the problem properly.
Thanks !
This example posted by jwest75674 should help. As you need to declare var = fingerprint in your script to allow Google Tag Manager to capture the data after the script has run
In short, you can copy the script below an add it as Custom HTML Tag in GTM (https://github.com/Valve/fingerprintjs2)
<script src="https://cdn.jsdelivr.net/npm/fingerprintjs2#2.1.0/dist/fingerprint2.min.js"></script>
<script type="text/javascript">
var fingerprint; // Variable to allow the Google Tag Manager to capture the data after this script has run.
if (window.requestIdleCallback) {
requestIdleCallback(function () {
Fingerprint2.get(function (components) {
console.log(components) // an array of components: {key: ..., value: ...}
})
})
} else {
setTimeout(function () {
Fingerprint2.get(function (components) {
console.log(components) // an array of components: {key: ..., value: ...}
})
}, 500)
}
</script>
Tag manager code has been implemented within an iframe on a webpage. It has not been added to the webpage that contains the iframe.
Ive used tag manager to then implement a floodlight tag, and looking at the stats it seems to be double firing.
Do you know why this might be and how to fix it?
You have to create a blocker to avoid send data when you load this on an iframe, you can use this variable (Custom Javascript)
function inIframe () {
try {
return window.self !== window.top;
} catch (e) {
return true;
}
}
How to identify if a webpage is being loaded inside an iframe or directly into the browser window?
And create a blocker when this var is true
I'm aware of Template.onRendered, however I have the need to destroy and setup some plugins that act on the dom when the actual context is updated.
So saying I have content template, I'd need something similar to the following:
Template.content.onBeforeChange(function () {
$(".editor").editable("destroy");
});
Template.content.onAfterChange(function () {
$(".editor").editable();
});
Is there any current way I can achieve this with the existing Template api?
You should be able to detect a context change within a template autorun by looking at currentData like this:
Template.content.onRendered(function() {
this.autorun(function() {
if (Template.currentData()) {
// the context just changed - insert code here
}
});
});
I'm unclear if that works for your particular case because this technique only gets you the equivalent of onAfterChange.
I have a template with few elements (input, radioButton etc). If I want to access to these DOM elements within mytemplate I can either access them within events
Template.myForm.events({
'click #submitButton' : function (event, template) {
//template variable here gives me access to the
//current template instance, so I can get to any
//DOM element within this template.
}
})
OR within
Template.myForm.rendered = function () {
//within this function I have access to "this" which points to template instance
}
I was wondering if there is a way to access the DOM Elements that a declared within a template outside of these event functions and rendered callback?
Thanks in advance
You can but you need to reference the template instance.
The reason for this is a single template can be used multiple times. In this case a single easy to use way to access the template would not know which instance it would belong to. This is why you need to use a reference, such as done in the example below.
You have to store the instance somewhere when it is rendered:
TheTemplateInstance = null;
Template.myForm.rendered = function() {
TheTemplateInstance = this;
}
Then you can use TheTemplateInstance anywhere you want, provided the template is on the DOM.
If you use myForm many times then it will only have access to the one created last.
Also You did not give a use case for your intentions. But there are several better ways to do most things with a template:
JQuery modding something when some variable changes (the most common use case where helpers aren't useful)
Template.myForm.rendered = function() {
var self = this;
this.autorun(function() {
var xx = something.findOne();
self.$("something").autoform() //Some jquery call
});
}
and helpers:
Template.myForm.helpers({
someName: function() {
return Session.get("name");
}
});
You can then use {{someName}} in your template's html where it can change when you use Session.set("name", "a new value");
I am forced to assign rendered callbacks to all my templates.
Until 0.9.0 I used to do it like this:
_.each( Template, function( template, name ) {
//...
template.rendered = function() {
//...
};
});
But now, Template is a constructor and not an object, so this method won't work here. Is there any way to pass callback function to all templates or fire function when all templates were rendered using Blaze?
Here is a quick workaround I came up with, iterating over every Template property to find out if it corresponds to a template definition, and if it does, assign the onRendered callback.
// make sure this code is executed after all your templates have been defined
Meteor.startup(function(){
for(var property in Template){
// check if the property is actually a blaze template
if(Blaze.isTemplate(Template[property])){
var template=Template[property];
// assign the template an onRendered callback who simply prints the view name
template.onRendered(function(){
console.log(this.view.name);
});
}
}
});
I don't know what's your use case so there may be better solutions depending on it.
With Meteor 1.2.1 the Template object has an onRendered(hook) function to accomplish an 'all template' onRendered behaviour.
Template.onRendered(function(){
var template = this;
Deps.afterFlush(function() {
console.log("triggering Jquery mobile component creation for "+template.view.name);
$(template.firstNode.parentElement).trigger("create");
});
});
The postponed update via Deps.afterFlush(callback) is optional and subject to your application needs.