I have an Wordpress elementor website, and I've installed Google Tag Manager on it.
On my GTM there's a tag with this JavaScript:
var form = getElementsByName('field[2]');
var form1 = form[0];
var form2 = form[1];
var att = document.createAttribute('value');
att.value = 'img-1';
form1.setAttributeNode(att);
form2.setAttributeNode(att);
As you can see, It's supposed to define the "value" of two form fields. The tag is firing, but the forms aren't receiving the value. When I open the console on the dev tools, I see the error
Uncaught ReferenceError: getElementsByName is not defined at <anonymous>:1:11
My question is: How can a native JS function such as getElementsByName() be not defined? How can I fix this? Is it possible that the problem is with Wordpress instead of GTM?
document.getElementsByName() returns a NodeList, so you have to access it by an index: document.getElementsByName('field')[2] (depending on how many of these you have).
Related
I am getting this error when trying to open Elementor with my custom theme meaning that Elementor page builder won't open. Has anyone come across this before?
Uncaught TypeError: e.dispatchEvent is not a function
at Function.dispatch (frontend.min.js?ver=3.6.5:2:34013)
at Frontend.init (frontend.min.js?ver=3.6.5:2:8627)
at Editor.initFrontend (editor.min.js?ver=3.6.5:2:322468)
at Editor.onPreviewLoaded (editor.min.js?ver=3.6.5:2:335102)
at Editor.onPreviewLoaded (editor.min.js?ver=3.6.5:2:344642)
at HTMLIFrameElement.dispatch (load-scripts.php?c=0&load%5Bchunk_0%5D=jquery-core,jquery-migrate,utils,moxiejs,plupload&ver=5.9.3:2:43064)
at HTMLIFrameElement.v.handle (load-scripts.php?c=0&load%5Bchunk_0%5D=jquery-core,jquery-migrate,utils,moxiejs,plupload&ver=5.9.3:2:41048)
This is a jquery issue. I had the same error, it was because jquery was loaded twice, two versions. The one that was puzzling me was getting loaded by GTM, so I couldn't find it in the code.
Michael is right I had the same issue. But the jQuery was hidden in a .js file within the theme.
So just double check jQuery isn't being loaded twice within your themes .js files.
When I found the second copy and removed it, I was receiving an error regarding the "$ is not a function".
jQuery(function($) {
/* Rest of code in file goes here
});
If you are getting the element from a jquery function, you need to extract the raw DOM element first
var e = $("#item1");
var d = e[0];
d.dispatchEvent(new Event('change',{ 'bubbles': true }));
In order to implement Content-Security-Policy, I need to pass nonce to GTM to allow tags.
Using nonce-aware version of GTM snippet works great for all tag types except Custom HTML.
Is there a way to pass nonce to Custom HTML and allow custom scripts, without using unsafe-inline?
In order to add the nonce attribute to the Custom HTML scripts, it must be first defined as a GTM variable:
Add id="gtmScript" to the nonce-aware version of GTM snippet - this will be used to target the element and capture nonce.
<script id="gtmScript" nonce="{GENERATED_NONCE}">
// GTM function
</script>
In GTM, create a new variable that will capture the nonce.
Use DOM Element type, and select the ID of the GTM snippet.
Now that the nonce variable is available in the GTM, add it to the Custom HTML script.
<script nonce="{{nonce}}">
console.log("CSP-allowed script with nonce:", "{{nonce}}");
</script>
If the tag is not firing, check the Support document.write. This can be a key step in Single Page Applications.
The GTM Custom HTML script is now nonce-allowed and fires as expected.
Of course, any assets used by this script will now need to be allowed in the CSP header.
Script within a script
Many tracking scripts are creating and firing additional script within themselves.
These will also be blocked as inline-scripts.
Find out where and how they are created, and add nonce to them as well.
Usually, the code looks similar to this:
var script = document.createElement("script");
script.type = "text/javascript";
script.async = true;
script.src = "https://tracking.js";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(script, s);
Edit this part of the code and insert the nonce variable, in the same manner along with other attributes.
script.nonce = "{{nonce}}";
Again, pay attention and whitelist any necessary assets that are now being blocked from this newly allowed script.
That's it - Custom HTML script is now fully CSP-allowed.
Source and disclaimer: I'm the author of expanded dev.to guide
I have found the same problem as others with the original solution proposed by Matija Mrkaic. His article was very useful but I was finding the nonce data attribute to be returning a blank value.
To fix this I added a data-nonce attribute to the GTM script with a variable in Tag Manager to extract the nonce value (similar to Matija Mrkaic. This new variable was called data-nonce). I then added a custom HTML tag in GTM that removes the data-nonce attribute once it is loaded.
GTM code:
<script id="gtmScript" nonce='{{csp_nonce}}' data-nonce='{{csp_nonce}}'>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;var n=d.querySelector('[nonce]');
n&&j.setAttribute('nonce',n.nonce||n.getAttribute('nonce'));f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','{{GOOGLE_TAG_MANAGER_ID}}');</script>
GTM Custom HTML tag to remove the nonce value once it was loaded:
<script nonce="{{data-nonce}}">
console.log("Inline script to remove data-nonce.");
document.getElementById("gtmScript").removeAttribute("data-nonce");
</script>
This solution is far from perfect but I have so far been unable to find a method to pass 'secrets' to GTM. Exposing the nonce value in the DOM is not recommended, the theory behind this 'temporary' solution is to only expose it for a short period of time until loaded into the Google Tag Manager variable.
Comments/suggestions welcome, many thanks.
For anyone having the issue with Chrome hiding the nonce attribute (noted by Keyhan and Dan in https://stackoverflow.com/a/65100705/3370010), I found that Google Tag Manager has a setting to get a variable from a global "JavaScript Variable".
You just need to set that global variable first. If you add Google Tag Manager dynamically, it can be set before your Google Tag Manager script.
window.nonceForCustomScripts = nonce;
If you are just inserting the code into the Google Tag Manger script, it would look something like
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;var n=d.querySelector('[nonce]');
n&&j.setAttribute('nonce',n.nonce||n.getAttribute('nonce'));
// Added code
w.nonceForCustomScripts = n.nonce||n.getAttribute('nonce');
// End added code
f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','your-gtm-id');
This is more secure than adding a data-nonce attribute because it prevents CSS-based attacks such as the one listed in https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/nonce
I have created a new property in DTM. Added header and footer code from DTM in the new website. I am using adobe's s_code version which i have set in the property. When I created a page load rule for custom tracking of the navigation it says "Uncaught Reference Error" s is not defined.
The page load rule that i have added is
//links tracking
$("a.top-nav-link").click(function() {
_satellite.notify('top nav clicked');
var tophatlinks = "ntap:TH:" + $(this).text();
s.eVar14 = tophatlinks;
s.linkTrackVars = "eVar14";
s.tl(this,'o');
});
But If i use event based rule it works and doesn't give the error. Since I have to use many click events I thought of adding one page rule and add all the custom tracking there. But this is not working. Any thoughts?
In DTM, s isn't a global variable so it cannot be directly referenced in some code fields.
However inside a rule, you can open the Adobe Analytics accordion and click 'custom page code' which open open a code editor where you can reference s without any issues.
I'm trying to make a simple image editor using canvas. My code is here http://jsfiddle.net/qrd3muyh/.
How to make the switch button to work? If I run it in my localhost, I got these error when clicking the button pencil : Uncaught TypeError: undefined is not a function
And when clicking the circle button : Uncaught ReferenceError: myCircle is not defined.
Why does it happen and any clue to solve it? Many thanks before..
The reason for this is because all PaperScript tags become a scoped object (referred to as a PaperScope). The reason you are getting the undefined error is because the jQuery callback function has no reference to myCircle, etc.
To resolve this, you should access the currently active paper scopes via the paper object.
$('#pencil').on('click', function(){
console.log(paper.tools); # See how many tools are in your paper object
paper.tools[1].activate(); # Activate one of them.
});
$('#circle').on('click', function(){
paper.tools[0].activate(); # Activate the other.
});
To get the currently active tool, you can do this:
$('#pencil').on('click', function(){
var current = paper.tool; # Access currently active tool.
current.remove(); # remove this tool
});
Here is some good reading about the PaperScopes.
I have an Google apps script and I want to call this Google apps script on my web page?How can I achieve this?This is my Google apps Script code for creating a google doc on my drive.
function createAndSendDocument() {
var doc = DocumentApp.create('Hello World');
doc.appendParagraph('This document was created by my first Google Apps Script.');
doc.saveAndClose();
var url = doc.getUrl();
var emailAddress = Session.getActiveUser().getEmail();
GmailApp.sendEmail(emailAddress,
'Hello '+ url);
}
and I want to call this function when I click on a button on my web page.But I don't know how to call this function on my button click.And one more thing I also save this script and change this version number and deploy as a web app and get the URL of this Google apps Script.
UPDATE: (added incorrectly in an answer)
Actually i am using this line like this.
btnClick.addEventListener("click", function () {
Page.ClientScript.RegisterStartupScript(this.GetType(), "GoogleFunction", "createAndSendDocument()", true);
}
So please now tell me what's wrong in that?When i run my application then it's show me an error like "The Page is not defined".
Look also at this documentation and also this one, everything is clearly explained .
you can add the div and the code in your page as you needed. also you need to add the javascript codes inside your head if it exists.
hi you can use this code on button click after adding a script manager in the form
Page.ClientScript.RegisterStartupScript(this.GetType(),"GoogleFunction","createAndSendDocument()",true);