Add external code to npm run build for index.html - facebook

Question

I wanna add a Tracking Code from FB to my VueJS LandingPage.
But i'm not sure where i have to place the code snippet?
<!-- Facebook Pixel Code -->
<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', 'xxxxxx');
fbq('track', 'PageView');
</script>
<noscript>
<img height="1" width="1"
src="https://www.facebook.com/tr?id=xxxxxx&ev=PageView
&noscript=1"/>
</noscript>
<!-- End Facebook Pixel Code -->
If i copy this code by myself to the index.html it work. but where i have to place this snippet that it will copy in my index.html build?

Answer 1

If you use Vue CLI 3, you should have a src folder and a public folder. The public folder contains the index.html that is used to generate the index.html-file you see in the dist folder after building. Just add your tracker to that and it should be included in your built version as well.
You can also copy the tracker script to the mounted hook of App.vue, or whatever you use as your main component. Since your application will do nothing useful anyway when javascript is disabled, there is little reason to track that as well.