Adding JavaScript and Tracking Code for Advanced Features

ClickFunnels allows you to add JavaScript and tracking code to your pages to implement advanced features such as custom interactivity, third-party tools, and analytics. In this guide, you’ll learn how to add custom JavaScript and tracking code to your pages effectively.

Requirements

1. An active ClickFunnels account

2. A page created in your workspace

3. External JavaScript or tracking code

Adding JavaScript Code Using the HTML/JS Element

The HTML/JS Element is ideal for adding custom JavaScript for specific features or interactivity on your page. This method is perfect for embedding widgets, animations, or interactive elements.

1. Inside the page editor, add a Section where you want to place the element.

2. Add a Row within that section.

3. Click the orange + Plus or Add New Element button inside the row to insert a new element.

4. From the MISC (Miscellaneous) category, select the HTML/JS element.

5. Click on the Open Code Editor button in the element's settings panel.

6. Wrap your JavaScript code within <script> </script> tags and paste it into the editor.
   

Note:

jQuery is available for use within ClickFunnels pages, so you can add jQuery syntax directly within the Custom HTML/JS element without needing to import it from CDN separately.

Learn more about the HTML/JS element in the HTML/JS: Insert Custom HTML and JavaScript Code article.

Adding Tracking Code in the Page Header or Footer

The Header Code and Footer Code sections in ClickFunnels are designed to add tracking scripts or global JavaScript that apply to the entire page. These are commonly used for analytics tools like Google Analytics or Facebook Pixel.

1. Inside the page editor, go to Settings > Tracking Code.

2. Choose Header or Footer Code:

   • Use the Header Code section for scripts that need to load early in the page lifecycle, such as analytics or CSS-based scripts.

   • Use the Footer Code section for JavaScript, which interacts with page elements or scripts that can load after the content.

3. Wrap the JavaScript code in <script> </script> tags and paste it into the appropriate section.
   

4. Save your changes and test the page by previewing or using browser developer tools to verify the script's execution.

When to Use Header vs. Footer Code

• Header Code: Add tracking or external scripts that must load before the page content.
  Example: Google Analytics or third-party CSS libraries.

• Footer Code: Add scripts that depend on the page being fully loaded.
  Example: Custom JavaScript or scripts that interact with HTML elements.

Important:

Adding tracking code inside the page editor applies only to that specific page. If you want the tracking code to load globally, consider the following options:

• Site Settings: Navigate to the Site app in ClickFunnels, then access the Site Settings from the three-dot menu. Paste your tracking code into the Header Code or Footer Code section. This ensures the code applies across your entire site, including courses, landing pages, blogs, store pages, and all funnel pages.

• Funnel Settings: Open the settings for a specific funnel and add the tracking code in the Header Code or Footer Code sections. This applies the code to all pages within that funnel.