Load Facebook Pixel/GTM Externally

JavaScript
1

I have an interest in loading Facebook Pixel/GTM in an external JS file. Why? I’m dealing with a large HTML site with a lot of pages, and I’d rather create one simple file that has the code just in case the company decides to change the script. It’s better than going to every…single…page to change the code. However, when I attempt to do this, I’m unable to see any tracking on the web page. It was mentioned that it can be caused by the <script> and <noscript> tags within the external file by FB and GTM.

When I insert the path <script src="foo/foo.js" /></script>, there’s no errors posting in the Chrome Console. The path is correct and yet with GTM and Facebook, there’s an error that it cannot detect the code. Am I better of off using an external jQuery function to post this data dynamically, or is there a simpler solution?

the foo.js file:

<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '000000000');
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=000000000&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->
<!-- Google Tag Manager -->
<script>(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;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-WOOOOFY');</script>

Thank you.

2

Hi,

If you unminify the first part of that code, it looks like this:

!(function (f, b, e, v, n, t, s) {
    if (window.fbq) return;
    n = window.fbq = function () {
        n.callMethod ? n.callMethod.apply(n, arguments) : n.queue.push(arguments);
    };
    if (!window._fbq) window._fbq = n;
    n.push = n;
    n.loaded = !0;
    n.version = "2.0";
    n.queue = [];

    scriptEl = document.createElement("script");
    scriptEl.async = !0;
    scriptEl.src = "https://connect.facebook.net/en_US/fbevents.js";
    
    s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(scriptEl, s);

})(window, document, "script", "https://connect.facebook.net/en_US/fbevents.js");

As you can see, it is creating a script tag and adding some attributes to it. Then, it gets a reference to the first script tag it can find in the DOM. Finally, it inserts the newly created script tag before the existing first script tag, as a child of the existing script tag’s parent.

So if you had this inline on the page as FB recommends:

<head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <script>
    // FB code here
  </script>
</head>

You would end up with:

<head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <script src="https://connect.facebook.net/en_US/fbevents.js" async></script>
  <script>
    // FB code here
  </script>
</head>

So the first thing to check using your browser’s dev tools is, is the script element being inserted into the DOM as expected?

1 Like
3

Hello, Mr. Hibbard.
That may be the problem–the fact that it may not be inserting into the DOM.

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.