PropFuel Website Engagement: plugin.js Integration Overview
Overview
The PropFuel plugin.js is a JavaScript script designed to integrate PropFuel’s engagement and tracking capabilities seamlessly into client websites. It enables real-time monitoring of page views, interaction display conditions, and dynamic content injection while ensuring minimal impact on website performance.
How It Works
This script follows best practices to ensure it does not interfere with a client’s website operations:
Namespace Isolation:
The script initializes a dedicated PropFuel object within the window namespace to avoid conflicts with other scripts.
Non-Blocking Execution:
It loads asynchronously (script.async = true), ensuring that it does not delay page rendering.
Uses event listeners (onload) to trigger its functionality only when fully loaded.
Efficient Page Tracking:
Monitors page changes using hashchange and popstate events (for SPAs and dynamic content changes).
Secure Data Handling:
Sends page and session details to the PropFuel server using fetch.
Uses cookies (pf_session) for session persistence while respecting cookie-based conditions.
Dynamic Content Injection:
PropFuel can display interactions inside iframes injected into the page dynamically.
Uses conditional logic to remove or replace active engagements based on visitor conditions.
By leveraging these techniques, PropFuel plugin.js ensures a seamless integration that is efficient, responsive, and non-intrusive, preserving the client’s website performance and user experience.
Data Sent to PropFuel Servers
The plugin sends structured data to PropFuel servers via a fetch API call using a POST request. The payload includes:
Client ID: Unique identifier for the PropFuel account.
Page URL: The full URL of the current page being viewed.
Page Hash: Any fragment identifiers (# values) present in the URL.
Page Title: The title of the page as defined in the document metadata.
Page Query Parameters: Extracted query string values used for tracking.
Session Token: A unique session identifier stored as a cookie (pf_session).
Client Width: The visitor’s viewport width to optimize engagement rendering.
Client-Side Conditions
PropFuel evaluates certain conditions directly in the visitor's browser. This includes checking cookie values client-side to determine eligibility for specific interactions. These values are not sent to PropFuel’s servers unless explicitly configured as part of authentication or tracking settings. This approach ensures privacy and minimizes unnecessary data transmission.