Merge pull request #39 from classmethod/feature/facebook-pixel

Add Facebook Pixel tracking support

Author: shigahi

src/App.tsx

@@ -161,6 +161,7 @@ export default function App() {
   >({});
   const [analytics, setAnalytics] = useState<AnalyticsOptions>({
     googleTagId: "",
+    facebookPixelId: "",
   });
   const [customHtml, setCustomHtml] = useState<CustomHtmlOptions>({
     headerHtml: "",
@@ -928,6 +929,19 @@ export default function App() {
                   variant="outlined"
                   size="small"
                 />
+                <TextField
+                  fullWidth
+                  label="Facebook Pixel ID"
+                  margin="dense"
+                  placeholder="123456789012345"
+                  helperText="Your Facebook Pixel ID for conversion tracking"
+                  onChange={(e) =>
+                    handleAnalyticsChange("facebookPixelId", e.target.value)
+                  }
+                  value={analytics.facebookPixelId}
+                  variant="outlined"
+                  size="small"
+                />
               </Box>
 
               <Box sx={{ mt: 3, pt: 2, borderTop: 1, borderColor: "grey.300" }}>

src/code.ts

@@ -36,6 +36,7 @@ export interface SeoOptions {
 
 export interface AnalyticsOptions {
   googleTagId?: string;
+  facebookPixelId?: string;
 }
 
 export interface CustomHtmlOptions {
@@ -160,9 +161,10 @@ ${slugs
 
   /*
    * Step 3.5: analytics configuration (optional)
-   * Add your Google Analytics 4 Measurement ID for built-in tracking
+   * Add your Google Analytics 4 Measurement ID and/or Facebook Pixel ID for built-in tracking
    */
   const GOOGLE_TAG_ID = '${analytics?.googleTagId || ""}';
+  const FACEBOOK_PIXEL_ID = '${analytics?.facebookPixelId || ""}';
 
   /*
    * Step 3.6: custom HTML header injection (optional)
@@ -565,6 +567,25 @@ ${
         </script>\`, { html: true });
       }
 
+      // Add Facebook Pixel if configured (Issue #31)
+      if (FACEBOOK_PIXEL_ID !== '') {
+        element.append(\`<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', '\${FACEBOOK_PIXEL_ID}');
+          fbq('track', 'PageView');
+        </script>
+        <noscript><img height="1" width="1" style="display:none"
+          src="https://www.facebook.com/tr?id=\${FACEBOOK_PIXEL_ID}&ev=PageView&noscript=1"
+        /></noscript>\`, { html: true });
+      }
+
       // Add Twitter/X meta tags for social cards (Issue #19)
       if (TWITTER_HANDLE !== '') {
         element.append(\`<meta name="twitter:site" content="\${TWITTER_HANDLE}">\`, { html: true });