For the past few weeks I've noticed that in a client's website WordPress dashboard, when I click on the Search box, I get a huge mess of error messages popping up across the screen. The error messages all start with "Error: Multiple pixels with conflicting versions were detected on this page." When I google this error message I get lots of discussion about something called "Facebook Pixel," but to my knowledge there is no such thing installed on this site. I see nothing of the sort in the Plugins page and the vast majority of changes to this site (other than creating posts) is done by me, and I have never heard of Facebook Pixel until this came up. I imagine it might be some plugin conflict, but as I said, no one to my knowledge knowingly installed Facebook Pixel. I don't know where to look to straighten this out. The site performance seems to be unaffected, but clearly something is out of whack in the back end.
I had a screenshot ready, but I apparently need a "reputation" of 10 to add it to the post, sorry!
"Facebook Pixel" is a snippet of code that looks like this:
<script>(function() {
var _fbq = window._fbq || (window._fbq = []);
if (!_fbq.loaded) {
var fbds = document.createElement('script');
fbds.async = true;
fbds.src = '//connect.facebook.net/en_US/fbds.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(fbds, s);
_fbq.loaded = true;
}
_fbq.push(['addPixelId', "1234567890"]);
})();
window._fbq = window._fbq || [];
window._fbq.push(["track", "PixelInitialized", {}]);
</script>
<noscript><img height="1" width="1" border="0" alt="" style="display:none" src="https://www.facebook.com/tr?id=1234567890&ev=NoScript" /></noscript>
It's not necessarily added by a plugin. Check to make sure whether or not it's been added into any "Header Scripts" sections of your website (or even "Footer Scripts" or "Body Scripts"). There may be a "custom scripts" plugin in your site, or they were added directly in a theme or plugin file.
I believe these errors can also be triggered by iframes - so if you have any embeds or iframes on your site, make sure they aren't the ones that have the pixel errors.
I ran into this or something similar as well. Perhaps this will solve your problem.
The form auto fill settings in chrome were causing this error. More Tools >> Clear browsing data... >> Check "Autofill form data" For some reason this was populating a Error: Multiple pixels with conflicting versions were detected on this page error in the search auto complete.
Related
I'm working on some websites that are using the WPBakery video background on rows. These should autoplay, and did until recently. Sometimes they do, and sometimes they don't. Typically it happens where they don't work more when I'm looking at them via Incognito mode on Chrome. I'm aware of the changes a couple years ago for autoplaying needing to include muted, and I've tried to hack this to add muted to the allow, but because it comes in via an iframe, it adds it too late for the autoplay to start.
Example Sites:
https://www.infrastructurereportcard.org/
https://brgcommunications.com/
https://colorworksinc.com/
I haven't seen other questions on this, but the fact that I'm seeing it on three totally different sites means that it is likely a larger issue.
Below is a bit of code that I tried, but wasn't successful in getting it to actually autoplay. It gave me an error of .play() is not a function.
<script type="text/javascript">
jQuery(function($) {
$(window).load(function(){
$('#widget2').attr('allow', 'muted accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture');
$('#widget2').play();
});
});
</script>
I think there's two parts of the WPBakery plugin's video background not working properly.
Video's with a Youtube-embed link are not working properly.
Video's stop autoplaying when using the same URL.
The first one is fixable by only using the URL's without embed. Something like: https://www.youtube.com/watch?v=XXXXXXXXX
The second one is fixable by creating a unique URL every time you load the page. This can be done by the following code:
function startVideo() {
const date = $('.video-wrapper').data('date');
let src = $('.video-wrapper iframe').attr('src');
src = src + '&autoplay=1&randomVar=' + date;
$('.video-wrapper iframe').attr('src', src);
}
This will take the existing url of the iframe, add the current date which is available on the wrapper and regenerate the video's url. This way the URL is always unique and will autoplay. You can also just generate a date manually and add that as a random param on the URL.
Hope this is of any help!
Google translate has stopped working in Chrome but still working in Firefox. The code is below and it was working for long time before now:
<script>
function googleSectionalElementInit() {
new google.translate.SectionalElement({
sectionalNodeClassName: 'can-translate',
controlNodeClassName: 'translation-control',
background: '#ffffcc'
}, 'google_sectional_element');
}
var url = top.location.href,
pos = url.search(/\/\w\w(\W|$)/),
lang = url.substring(pos+1,pos+3),
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = false;
ga.src = 'https://translate.google.com/translate_a/element.js?cb=googleSectionalElementInit&ug=section&hl='+lang;
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga);
})();
</script>
At the moment here is error:
Cross-Origin Read Blocking (CORB) blocked cross-origin response https://translate.googleapis.com/translate_a/l?client=te&alpha=true&hl=en&cb=_callbacks____0jtqeel7c with MIME type application/json. See https://www.chromestatus.com/feature/5629709824032768 for more details.
If it go to the proposed link, here is suggestion:
Make sure these resources are served with a correct "Content-Type" response header from the list below, as well as a "X-Content-Type-Options: nosniff" response header.
Also there is message at https://translate.google.com/intl/en/about/website/
We no longer provide new access to Google Translate's Website Translator. This change does not affect existing use of the Website Translator.
This has affect in Chrome only, code above is Google only and I've no idea where and how to add "X-Content-Type-Options: nosniff".
UPD: there are both of two necessary headers.
Does Google blocked itself and does anyone know how to fix it?
UPD1: Google translate error began to appear and in Firefox 66.0.1 too. It is
The resource from “https://translate.googleapis.com/translate_a/l?client=te&alpha=true&hl=en&cb=_callbacks____0jttrta1j” was blocked due to MIME type (“application/json”) mismatch (X-Content-Type-Options: nosniff).
It looks like some glitch of translation service, after one page refresh it works, after another - server returns incorrect data, json instead of javascript or something like this
At this point, if you manually delete a cookie with the name "NID" for the host .translate.googleapis.com, you can process the page(CORB error disappears)
By the way, repeated page calls also sometimes remove this error. But the solution to the problem is as strange as its occurrence.
Please open a bug via https://crbug.com/new and try to provide as many details as possible:
Did the issue work in Chrome 72 and stopped working in Chrome 73?
Is there a repro page that shows the problem? What is the expected VS observed behavior?
Does the issue repro without any Chrome extensions present?
Does the broken page use AppCache?
I've encountered this issue on multiple sites, it first started on Chrome on my Pixel 2.
The widget does appear on the first load sometimes, if not a reload is all that's required, not even a hard reload. My guess would be that Google are trying to phase the widget out.
The widget does still work without any issues on all other browsers.
I've recently built and launched this page: http://www.thaiestatenetwork.com
It works great in Chrome, Safari, Firefox and even IE10, but in IE8 and 9 all I get is a blank page.
I've read through post here on SO about similar issues and based on that I've tried this:
going over my templates in an attempt to find DOM errors.
Tried setting position:static on html and body
commented out #font-face in my CSS (since I was getting an error in IE on BrowserStack related to #font-face)
Checked for potential CORS issues. Found none.
None of it works.
Strangely too, when I tunnel to my local dev machine through BrowserStack, everything works like a charm.
I should add that the site is built using router https://github.com/tmeasday/meteor-router and runs on Heroku using this build pack: https://github.com/oortcloud/heroku-buildpack-meteorite
I really hope someone out there has that fresh pair of eyes that will lead me on the right track.
I've solved it!
The issue turned out to be related to the way I was initializing Google Analytics (GA). I was doing this:
Template.menu.created = function() {
// GA initialization code here
};
I had to do this:
Template.menu.rendered = function() {
if ( typeof ga === 'undefined' ) {
// GA initialization code here
}
};
So basically I was attempting to initialise GA on first creation of my menu template, but instead I had to latch on to the rendered callback and add a conditional to make sure I only initialise GA once.
Overall I am not thrilled with my approach to initialising GA, but that is another matter entirely. It works.
I need to use the extra powers of the swfobject api. This object is a new way of embedding Youtube videos into web sites.
Pasting code that I found from Google's tutorial directly into the WordPress editor was in-effective. WordPress would not treat this as active code.
So, I created a new template file and inserted my code into that file. This worked relatively well. The code went live and I got the extra feature that I was looking for, which was that I am able to have the visuals of the video autoplay, and to have the sound muted by default.
However, this has messed up the layout and flow of my menus which where just above the video.
Can anyone tell me where to proper place to put this code is, or is this question too specific. If it will help you can see the messed up page at:
http://bestoftimesusa.com/home-mute-test/
and how it is supposed to look at:
http://bestoftimesusa.com
The fully functional code that got embedded is this:
<script type="text/javascript" src="/wp-includes/js/swfobject/swfobject.js"></script>
<div id="ytapiplayer">
You need Flash player 8+ and JavaScript enabled to view this video.
</div>
<script type="text/javascript">
var ytplayer = false;
var params = { allowScriptAccess: "always" };
var atts = { id: "myytplayer" };
swfobject.embedSWF("http://www.youtube.com/v/IBjstQceGBk?enablejsapi=1&playerapiid=ytplayer&version=3&autoplay=1",
"ytapiplayer", "370", "238", "8", null, null, params, atts);
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("myytplayer");
ytplayer.mute();
}
</script>
</div>
Unless you want the same youtube video to appear on all pages (of a certain type), I don't think putting that entire block in your template files makes sense. The only part that really makes sense for a template file is the first line. The lines after that are video-specific.
By default, WordPress filters out javascript from posts. You can disable that filtering with a plugin which would allow you to include javascript in your posts.
Using that plugin, you can set javascript filters on a global or per-post basis. It seems like a per-post basis would work for you so I'd go with that, just enabling it on the page I wanted.
Two last things:
You could put the first line in one of your template files to eliminate having to put that in every post
You have one opening <div> tag but two closing </div> tags, that could be expected, but I'd double check.
I have a page that has a simple javascript in the header portion of the page:
<script type="text/javascript">
function doLogout() {
var conf = confirm("Really log out?");
if (conf === true) { //changed == to === for boolean comparison
$.post("logout.aspx");
}
}
</script>
It uses jQuery to do an AJAX post to my logout page. The only issue right now is that when I click on the link (logout) to fire this function, nothing happens. I checked FireBug's console, and it told me that the function is not defined. This has happened to me before, but I think I botched a bunch of code to fix it sometimes.
Does anyone know the proper way to fix this issue?
Edit
After doing a lot of googling and trying different things, I found this very concise and informative post. Apparently, as the linked article states, the way the script is referenced in the web site is important as it won't run properly otherwise! Hopefully this information will be useful for more people.
This can also occur if there is a syntax error earlier in your javascript code. Often this will just be interpreted as the function not existing (nor any function AFTER the error). Check the code above this code (if there is any) and this code for syntax errors.
A way to tell if the cache error is it is to open Firebug and view the Script source. If the page was cached, you won't see your code. If it loaded but has syntax errors, the code will show, though it won't "find" it.
Things to test:
1) Can you call this function from something else? Like add a <script> at the bottom of the page to call it?
2) Does the page validate? Sometimes I get screwy javascript errors if there is some busted HTML like a missing </b>
3) I've been starting to wrap my javascript in <![CDATA[ ]]> just incase I've got goofy chars in my javascript.
4) I assume you've tested this in other browsers and have the same behavior, right?
5) If you haven't installed it already, install the Web Developer firefox addon. It has a nifty toolbar menu that will disable the cache for you so everything reloads.
6) As weird as it sounds, I once hit a javascript issue that was because of how my text editor was saving UTF-8 files. I forget the details, but it was adding some byte-order-mark or something that upset the browser.
I've had this occur when the page had been cached and so it didn't load the new script in. So to fix it clear all private data from Firefox. Not sure if that helps but it sure happened to me a bunch.
Other ideas for you to test:
is the function defined in the DOM tab in FireBug?
if you call doLogout() from the FireBug console, what happens?
I assume this is not the only script on that page. Make sure that some later script is not modifying doLogout to something else
I had the same issue and tried all that's been suggested here without success.
The only way I fixed it was by discovering that in the <script src="jquery.js"> tag I was using in the head of the page I forgot to close it with its </script> causing the page to ignore all Javascript functions. So please check that your includes look like:
<script src="jquery.js"></script>
I hope that helps. Ross.
If you are using DevExpress controls these links may help you: How to register and execute a JavaScript downloaded to the client via a callback and How to register and execute a JavaScript downloaded to the client via a callback (standalone JS file) and Executing javascripts from user controls dynamically created through ASPxCallback panels
The issue might occur if you have NoScript. You should check and make sure it's not blocking said script.
I had this issue and discovered the problem was just a wrong case letter inside the name.
Call: filterCheckbox()
vs
function filterCheckBox() {}
problem: lowercase "box" vs uppercase "Box".
So check if the name is exactly the same.