Anyone one have any insight on how to integrate a Meta/FB Pixel with a SolidStart site?

I saw resources how to implement it with next but, the package seemed slightly different from SolidStart

8 Replies

We have @solid-primitives/script-loader to interact with external scripts.

import { createScriptLoader } from "@solid-primitives/script-loader";

createScriptLoader({
  url: 'https://connect.facebook.net/en_US/fbevents.js',
  onLoad: () => {
    window.fbq('init', '{your-pixel-id-goes-here}');
    window.fbq('track', 'PageView');
  }
});

import { createScriptLoader } from "@solid-primitives/script-loader";

createScriptLoader({
  url: 'https://connect.facebook.net/en_US/fbevents.js',
  onLoad: () => {
    window.fbq('init', '{your-pixel-id-goes-here}');
    window.fbq('track', 'PageView');
  }
});

narmiaOP•2y ago

Thanks! Would I need to wrap that within a createEffect or, onMount for it to fire properly?

Alex Lohr•2y ago

Neither. You can just put it into the top level of your component, or even global scope.

narmiaOP•2y ago

When I do I get this error. Tried looking at stsack overflow but can't find an answer that fixes it. uncaught TypeError: Cannot use 'in' operator to search for 'Symbol(solid-proxy)' in https://connect.facebook.net/en_US/fbe

Alex Lohr•2y ago

Sorry, I'm a bit short on time; need to check later. Sorry, wrong argument syntax.

narmiaOP•2y ago

Thanks, not sure what I'm doing wrong lol. Added it to the index page of my SolidStart app and it just breaks the entire site

Daniel Sousa @TutoDS•2mo ago

How can this works for google tag manager? And other question, how to type window to have fbq? Did you face this:window.fbq is not a function

Alex Lohr•2mo ago

declare global {
    interface Window {
        fbq: [insert type here];
    }
}

declare global {
    interface Window {
        fbq: [insert type here];
    }
}

Gaming

Programming

Anyone one have any insight on how to integrate a Meta/FB Pixel with a SolidStart site?