Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Twitter tracking pixel causing MIME type error

I'm trying to load Twitter's tracking pixel on my Meteor/NodeJS website.

The code they provide is:

!(function(e, t, n, s, u, a) {
    e.twq ||
        ((s = e.twq = function() {
            s.exe ? s.exe.apply(s, arguments) : s.queue.push(arguments);
        }),
        (s.version = "1.1"),
        (s.queue = []),
        (u = t.createElement(n)),
        (u.async = !0),
        (u.src = "//static.ads-twitter.com/uwt.js"),
        (document.body.appendChild(u)));
   })(window, document, "script");

twq("init", "MY-TRACKING-ID");
twq("track", "PageView");

It loads fine but returns the following error in the console:

Refused to execute script from 'https://analytics.twitter.com/i/adsct?p_id=Twitter...' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

This is the exact same problem as: https://twittercommunity.com/t/analytics-tracking-pixel-error-was-blocked-due-to-mime-type-mismatch-x-content-type-options-nosniff/83583/2, but while that thread is unresolved he's running the Twitter tracking pixel on that site now, which suggests it's a server configuration issue.

Looking at the code, this uwt.js file from Twitter it requests a script from https://analytics.twitter.com/i/adsct which Chrome is preventing from running.

This answer suggests it's either a MIME type config issue (I'm running Nginx) or a header issue, but removing X-Content-Type-Options: nosniff and restarting Nginx had no effect.

Any idea how to fix or better troubleshoot this?

like image 383
OrdinaryHuman Avatar asked Sep 29 '17 16:09

OrdinaryHuman


Video Answer


1 Answers

TLDR: This scary error message proves the conversion/s are actually being received by Twitter, so thankfully there's not much to worry about.

I'm getting the same console error when implemented as per Twitter's Google Tag Manager instructions. Clearing out cookies didn't help in my instance. In fact, the same error shows up on Twitter's own help pages!

Here's the offending function in the minified uwt.js script, exposed as twttr.conversion.buildPixel():

buildPixel: function(e) {
    var t = new Image;
    t.src = e
},

User agents will queue up a request for the Image as soon as it's src property is set, and often expect a valid image in response. Twitter's servers however provide content-type:text/html;charset=utf-8 as a response header.

The latest version of Chrome obviously doesn't like loading text/html into instances of Image, but could probably be logging a nicer error message, especially since the response also includes a Content-Length: 0 header indicating there's nothing to see.

like image 73
user2519832 Avatar answered Oct 04 '22 10:10

user2519832