Lovable and Crazy Egg integration: Step-by-Step Guide 2025

 

Step 1: Creating the Crazy Egg Integration File

 

In your Lovable project, create a new TypeScript file to manage the Crazy Egg integration. For example, create a new file named crazyEgg.ts in your src/integrations/ folder. If the integrations folder does not exist, create it.

export function initializeCrazyEgg(): void {
  const script = document.createElement("script");
  script.type = "text/javascript";
  script.async = true;
  // Replace the URL below with your Crazy Egg script source, including any parameters Crazy Egg requires
  script.src = "https://dnn506yrbagrg.cloudfront.net/pages/scripts/0012/1234.js?" + Math.floor(new Date().getTime() / 3600000);
  document.head.appendChild(script);
}

This file defines a function that creates and appends the Crazy Egg script tag to your document header, ensuring that Crazy Egg will load asynchronously upon initialization.

 

Step 2: Calling the Integration Code

 

In your Lovable application's main entry file (for example, index.ts or app.ts), you need to import and call the initializeCrazyEgg function. This ensures that when your application starts, the Crazy Egg tracker is loaded automatically.

import { initializeCrazyEgg } from "./integrations/crazyEgg";

// Call the function during app initialization
initializeCrazyEgg();

// Continue with the rest of your application initialization code

Place the import and function call at the beginning of your entry file. This guarantees that Crazy Egg is set up as soon as the application starts running.

 

Step 3: Handling Dependencies Without a Terminal

 

Since Lovable does not provide a terminal for dependency installation, you must include any external libraries by adding their CDN links or embedding them directly in your code if needed. For the Crazy Egg integration, no external npm packages are necessary because we are inserting a script tag manually.

If in the future you need to rely on an external module, check if Lovable allows you to add script tags in your index.html file. Otherwise, you can include the library’s UMD build via a CDN link within your project’s HTML file.

 

Step 4: Verifying the Integration

 

After inserting the above snippets, verify that Crazy Egg is loaded. You can do so by:

// When the page loads, open the browser console and type:
console.log(document.querySelector('script[src*="pages/scripts"]'));
// This should log the Crazy Egg script element if it was added successfully.

This confirmation step helps ensure that your Crazy Egg integration is working correctly.

 

Step 5: Final Adjustments and Testing

 

Once you are satisfied with the integration, test your Lovable project thoroughly by:

// Ensure all parts of your app work as expected
window.addEventListener("load", () => {
  // Optionally, log that Crazy Egg has been initiated
  console.log("Crazy Egg integration loaded");
});

Review your changes, save the files, and refresh your Lovable project to see the Crazy Egg analytics starting to work.