All Collections
Building funnels
Adding custom code, pixels, javascript and CSS
Adding custom code, pixels, javascript and CSS

Using custom code managers to add custom CSS and custom javascript

Jonathan Denney avatar
Written by Jonathan Denney
Updated over a week ago

While ConvertFlow's funnel builder is a no-code platform, you'll still need to occasionally add custom scripts, conversion pixels, and CSS to your campaigns.

ConvertFlow's custom code managers help you keep all your ConvertFlow-related custom code organized, and makes sure this code loads at the right time.

Adding custom scripts to all campaigns

Want to add custom code, such as tracking tags and custom CSS, to all of your ConvertFlow campaigns?

Head to Settings > Edit and you'll find a custom code setting for all campaigns.

All landing pages

Custom code added here will run as your landing pages' content loads. Click save after your edits.

Important: ConvertFlow has native integrations with Google Tag Manager, Google Analytics, and Segment, to handle installing their libraries and populating them with events.

All popups & embed campaigns

Similar to adding code to all landing pages, you can do the same for all popup & embed campaigns, from Settings > Edit. Remember to save after your edits.

Custom code added here will run when your campaign becomes visible (upon trigger for popups, upon scroll into view for embeds).

Adding custom code to specific campaign variants

First, enter the builder of a specific variant of your campaign. Then, click to the "Settings" tab. Last, click the custom code edit button.

You'll find a code editor where you can place your custom code.

This custom code will run as soon as your campaign becomes visible (immediately for landing pages, upon trigger for popups, upon scroll into view for embeds).

Adding custom code to specific funnel steps

You can run custom code when a certain step of your funnel is reached.

To do this, select the funnel step in the builder. Then, click to edit its custom code.

When using funnel step skip logic, custom code applied to the first step of the funnel will always run. However, any other skipped funnel steps' custom code will not run.

Firing custom scripts when conversion elements are clicked

When managing the actions of a conversion element (button, form, quiz etc), you can edit custom code.

This custom code will fire as soon as the conversion element is completed, such as a button element being clicked, form submitted, quiz completed, etc.

Pro tip: By adding conditional actions, you can use ConvertFlow's conditions interface to control which custom scripts fire.

Important: When using funnel skip logic, custom code applied to the first step of the funnel will always run. However, any other skipped funnel steps' custom code will not run.

Why can't I add scripts to the head?

ConvertFlow's campaign content is dynamically loaded using Javascript, based on rules such as conditions, split-testing, personalization, etc.

Because it's not server-rendered HTML, which is evaluated upon the first rendering before javascript runs, we don't add custom scripts to the <head> tag.

Custom scripts added through ConvertFlow's script manager get added to the end of the <body> tag, reflecting the actual load order that the script was added to the page.

This may not align with script installation instructions from various tracking script / conversion pixel providers, which tend to default to instructing installing their script in the <head>.

However, it should not cause errors or prevent event tracking, unless their script is written to run synchronously.

Error debugging

Any errors from custom javascript, added using ConvertFlow's custom script managers, will be caught and logged in the javascript console as a message with the stack trace accessible.

This ensures there is no interruption to ConvertFlow's functionality, data processing, and your visitors' funnel flow. The downside of this, is errors from your custom scripts may not be logged in your website's javascript profiling tools.

Did this answer your question?