PropFuel Website Engagement: plugin.js Integration Technical Deep Dive
Overview
The PropFuel plugin.js is a lightweight JavaScript snippet designed to integrate PropFuel’s engagement and tracking capabilities into any website. This embed code ensures that PropFuel interactions can be dynamically loaded and displayed based on configured conditions.
Embed Code Example
<script>
(function() {
var script = document.createElement('script');
script.src = "https://web.propfuel.com/plugin.js";
script.async = true;
script.onload = function() {
if (window.PropFuel) {
PropFuel.init('xxxx', {});
}
};
document.head.appendChild(script);
})();
</script>
How It Works
The embed code performs several key functions:
Creates a <script> element dynamically – Instead of directly embedding the script, this method allows for asynchronous loading to prevent blocking other scripts on the page.
Loads the PropFuel script (plugin.js) from PropFuel’s servers – The script is hosted on https://web.propfuel.com/plugin.js to ensure easy updates and version control.
Ensures asynchronous execution – By setting script.async = true, the script loads in the background without delaying other page elements.
Waits for the script to fully load – The script.onload function ensures that PropFuel is only initialized after the external script is available.
Initializes PropFuel – The PropFuel.init('xxxx', {}); function call starts the PropFuel system with a unique account identifier (represented by 'xxxx' in this example).
Appends the script to the document head – This ensures the script is properly added to the DOM and executed.
Why This Approach?
This implementation follows best practices for embedding third-party scripts:
Non-blocking execution: Ensuring page load performance is unaffected.
Modular structure: Allows easy management and customization.
Dynamic initialization: Ensures PropFuel is loaded only when needed.
Customization
The 'xxxx' placeholder represents the unique identifier for your PropFuel account. It must be replaced with your actual account ID.
Additional configuration options can be passed within the {} object in PropFuel.init() to control plugin behavior.
By embedding this script, you enable PropFuel to track visitor activity and display relevant engagements without manual intervention.