Issue with Finsweet Cookie Consent Component and Custom Script Execution

Finsweet Components Cookie Consent
1

Hello Finsweet community,

I’ve been running into an issue while using the Finsweet Cookie Consent Component in one of my Webflow projects. In the Head Code of my project, I’m using the following custom script to manage and execute functions only once, even if a section appears multiple times on the page:

<script>
  (function (global) {
    global.pageFunctions = global.pageFunctions || {
      executed: {},
      functions: {},
      addFunction: function (id, fn) {
        if (!this.functions[id]) this.functions[id] = fn;
      },
      executeFunctions: function () {
        if (this.added) return;
        this.added = true;
        for (const id in this.functions) {
          if (!this.executed[id]) {
            try {
              this.functions[id]();
              this.executed[id] = true;
            } catch (e) {
              console.error(`Error executing function ${id}:`, e);
            }
          }
        }
      },
    };
  })(window);
</script>

For each section, I add my code with:

<script>
pageFunctions.addFunction('yourFunctionName', function() {
	// your code
});
</script>

This setup has been working perfectly for my needs, ensuring scripts run only once per section instance.

The Problem:
After integrating the Finsweet Cookie Consent Component, I noticed that the scripts managed by the setup above are not executing as expected when they are combined with the attributes from the Cookie Consent Component, even when the appropriate cookies are accepted. I suspect this happens because my script runs before the Cookie Consent Component processes the user’s preferences.

Questions:

  • Is there a way to adjust the script order so that the Cookie Consent Component’s script runs before the custom script in the Head Code?
  • Would it be more effective to wrap my pageFunctions logic with a check to see if the Cookie Consent Component has completed processing? If so, any recommendations on how best to implement this?

I’d appreciate any insights or advice on how to resolve this issue. Has anyone else experienced this or found a solution?

Thanks in advance for your help!

2

Hello @juicydisorder!

We can resolve both issues by wrapping your code in the Consent API.

In its most basic form, it looks like this

  window.fsComponents = window.fsComponents || [];
  window.fsComponents.push([
    'consent',
    (instance) => {
      console.log('Consent instance:', instance);
      // Add your code here
    },
  ]);

The code inside will only run after the Consent script loads and runs.

If you need help implementing this please let me know!

3

Hey @Support-Luis!

Thanks, that did the trick! Are there any docs for the Consent API I can check out?

Appreciate the help!

4

You are welcome @juicydisorder! We are still working on the documentation, but we will let you know once its out :wink:

1 Like