How to Add Pre/Post-Campaign Code?

Campaign Code runs on all the pages included in a test for all the variations and control. Using VWO, you can add two types of JavaScript code snippets: Post-campaign code and Pre-campaign code.

Some common usage for Campaign or Global JS code in VWO include:

• Sending VWO campaign data to analytics tools.

• Custom conversion goal tracking (using pre-campaign JS).

• Define a JS function to capture the variation served to a visitor and then trigger the respective variation of a survey/notification widget.

Post-Campaign Code

This is the default mode when you select the Campaign Code option. Here, you can define the JS code that you want VWO to execute after the campaign code executes on the page.

To add post-campaign code:

1. Select the variation you want to edit and then click Code on VWO Visual Editor.
   

   NOTE: Post-campaign code will run only on the URLs which are included under the Settings > URLs section in the test.

2. Click Campaign Code on the upper-left side of the editor and under the JavaScript tab enter the JavaScript you want to add to implement a change across all the variations and control of your test pages. 
   

3. To add custom CSS to the website, navigate to the CSS tab > Include External Stylesheet.
   
4. Enter the URL of the CSS you want to include. To use some commonly known CSS libraries, select an option from the Quick Add list and then click DONE.
   

Pre-Campaign Code

You can add JavaScript/CSS/HTML code to your campaign pages to indicate that VWO must run the code on the page before applying any changes to the variations. It allows you to trigger custom conversion goals without changing the code base of the entire website.

To add pre-campaign JS/CSS/HTML code:

1.  Click Campaign Code in the upper-left corner of the code editor window and then select JavaScript > define Pre-Campaign JS.
   

2. Add your pre-campaign JS code on the right panel of the window. On the left panel, enter the global/post-campaign JS code you want to execute after applying changes.
   

3. If you have selected Code-only mode for the editor, click Ellipsis in the JavaScript tab and select Add Pre Campaign JS.

4. To apply the changes, click DONE.