Ways to Add Custom Dimension Code on your Webpages Using VWO

Apart from manually adding the custom dimension code in the source code of your webpages, You can add the Custom Dimension code using:

1. VWO Editor
2. Tag managers like Google Tag Manager(GTM)

Adding Custom Dimensions via VWO Editor
The pre-JS code snippet for custom dimension triggers on both campaign and goal pages, while the post-JS code triggers on campaign pages only.

NOTE: The pre/post JS executes only when the campaign is running. This method is best for capturing test-specific data for a running campaign. 

Adding Pre-JS Code
To add pre-JS code for the custom dimension, click Campaign JS/CSS on the Code Editor, and enter the dimension code snippet under the Pre-Campaign Javascript section. To know about how to add Pre-Js Code, refer to How to add Pre-JS Code.

Adding Post-JS Code
To add post-JS code for the custom dimension, click Campaign JS/CSS on the Code Editor, and enter the dimension code snippet under the Post-Campaign Javascript section. To know about how to add Post-Js Code, refer to How to add Pre-JS Code.

Adding Custom Dimensions Using GTM
If you are using Google Tag Manager (GTM) to manage JavaScript and HTML tags, you can push the Custom Dimension code snippet to your website using GTM.

Procedure

1. Login to Google Tag Manager.
2. In your GTM admin dashboard, select Tags. 
3. To create a new tag, click New.
   The new tag window appears.
4. To choose a Tag type, click anywhere in the Tag Configuration section.
5. From the tags list, select Custom HTML.
6. In the Tag Configuration section, enter the Custom Dimension JavaScript Code snippet in the HTML text box. You can access the code snippet from the custom dimensions you have created in  Settings > Custom Dimensions.
   ATTENTION: Make sure to add the proper tags and TAG_VALUE in the code snippet.
7. To choose a trigger to make the tag fire, click anywhere in the Triggering section.
8. Select All Pages to fire the Custom Dimension on All pages. 
   NOTE: You can add the triggers to specific pages or elements per your requirements. For example, if you select ‘Click of a button’ as the trigger condition and specify the Element ID of the button, GTM will trigger the event every time your website visitors click on the specified button.