CODEWITHSUNDEEP
vue.jsvuejs2environment-variablesfacebook-pixel
efirat
efirat

Reputation: 3867

Facebook Pixel integration on Vue 2.6 with env & custom index templates

FB Pixel is generally blocked when you add meta tag or script dynamically. And if you have different pixel accounts for your staging and production environments you need to add meta tag & script dynamically getting id & content from env files. The result is

Failed to load resource: net::ERR_BLOCKED_BY_CLIENT

How to achieve run FB pixel successfully?

Upvotes: 0

Views: 942

Answers (1)

efirat
efirat

Reputation: 3867

To achieve this, a solution is you need to use different index.html templates for different environments. In default, vue cli using public/index.html file to build app. But we can change it using vue.config.js as below.

module.exports = {
  pluginOptions: {
    i18n: {
      locale: "en",
      fallbackLocale: "en",
      localeDir: "locales",
      enableInSFC: false
    }
  },
  pages: {
    index: {
      entry: "src/main.js",
      template: process.env.VUE_APP_INDEX_TEMPLATE,
      filename: "index.html"
    }
  },
  transpileDependencies: ["vuetify"]
};

as you can see on template, we are using env variables.

and we need to add this variables to all env files, in my case I am using

.env.staging 
.env.development 
.env.production

and the keys in order

VUE_APP_INDEX_TEMPLATE=public/index_staging.html
VUE_APP_INDEX_TEMPLATE=public/index_development.html
VUE_APP_INDEX_TEMPLATE=public/index.html

And we need to add FB Pixel meta tag & script files to the templates according to its own pixel account credentials inside the head tags statically.

  <head>
    ...
    <!-- Facebook Pixel Code -->
    <meta
      name="facebook-domain-verification"
      content="FB_DOMAIN_VERIFICATION_CODE_HERE_STATICALLY"
    />
    <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", "FB_PIXEL_ID_HERE_STATICALLY");
      fbq("track", "PageView");
    </script>
    <noscript
      ><img
        height="1"
        width="1"
        style="display:none"
        src="https://www.facebook.com/tr?id=FB_PIXEL_ID_HERE_STATICALLY&ev=PageView&noscript=1"
    /></noscript>
    <!-- End Facebook Pixel Code -->
  </head>

Upvotes: 1

Related Questions