Add Facebook Pixel tracking script #72
Conversation
WalkthroughThe changes add a self-invoking function in the Changes
Sequence Diagram(s)sequenceDiagram
participant User as Browser
participant Page as Webpage
participant Loader as FB Script Loader
User->>Page: Load webpage
Page->>Page: Check if fbq exists
alt fbq does not exist
Page->>Page: Define fbq function and initialize queue
Page->>Loader: Load Facebook tracking script asynchronously
end
Page->>Page: Initialize with tracking ID
Page->>Loader: Send 'PageView' event
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
docs/facebook-pixel.js (1)
4-5: Add development environment configuration.Consider adding debug mode for development environments to help with tracking verification and debugging.
Apply this diff to add debug mode:
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; +n.queue=[]; +// Enable debug mode in development +if (process.env.NODE_ENV === 'development') { + n.debug = true; +} +t=b.createElement(e);t.async=!0;
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
docs/facebook-pixel.js(1 hunks)
🔇 Additional comments (2)
docs/facebook-pixel.js (2)
6-8:⚠️ Potential issueAdd SRI hash and error handling for the external script.
The external script loading should include:
- Subresource Integrity (SRI) hash for security
- Error handling for script load failures
Apply this diff to enhance security and reliability:
-t.src=v;s=b.getElementsByTagName(e)[0]; +t.src=v; +t.integrity='sha384-{{HASH}}'; +t.crossOrigin='anonymous'; +t.onerror = function() { + console.error('Failed to load Facebook Pixel script'); +}; +s=b.getElementsByTagName(e)[0];
9-10: 🛠️ Refactor suggestionUse environment-specific pixel IDs.
The pixel ID should not be hardcoded and should vary based on the environment to prevent tracking in non-production environments.
Apply this diff to implement environment-specific configuration:
-fbq('init', '1218366289258395'); -fbq('track', 'PageView'); +const pixelId = process.env.FB_PIXEL_ID || '1218366289258395'; +if (/^\d{15,16}$/.test(pixelId)) { + fbq('init', pixelId); + fbq('track', 'PageView'); +} else { + console.error('Invalid Facebook Pixel ID'); +}Please verify if the pixel ID format is correct:
Integrate Facebook Pixel for tracking page views and user interactions.
Summary by CodeRabbit