I am working on a Next.js project and I want to use Partytown to improve the performance of my Firebase scripts. Partytown executes scripts in a web worker, and I'm trying to figure out how to set it up so that I can use Firebase's logEvent function in my code.
Here's the Firebase script I have (from the Firebase documentation):
<script type="module">
// Import the functions you need from the SDKs you need
import { initializeApp, logEvent as firebaseLogEvent } from "https://www.gstatic.com/firebasejs/10.5.0/firebase-app.js";
import { getAnalytics } from "https://www.gstatic.com/firebasejs/10.5.0/firebase-analytics.js";
// Your web app's Firebase configuration
const firebaseConfig = {
apiKey: "xxx",
authDomain: "xxx",
projectId: "xxx",
storageBucket: "xxx",
messagingSenderId: "xxx",
appId: "xxx",
measurementId: "xxx"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
// I would like to expose this function outside
const logEvent = (eventName, eventParams) => firebaseLogEvent(analytics, eventName, eventParams);
</script>
I've tried wrapping the script with type="text/partytown" and including the Partytown component in my project, but I'm unsure how to expose the logEvent function so that I can use it in my main thread.
<script
type="text/partytown"
dangerouslySetInnerHTML={{
__html: `
// Firebase script here...
`,
}}
/>
<Partytown debug={true} />
I want to be able to call logEvent from anywhere in my code like so:
logEvent('event_name', { /* event parameters */ });
How can I set this up? Has anyone successfully integrated Firebase with Partytown in a Next.js project? Any help or guidance would be appreciated!