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.

NOTE: If the custom dimension is entered via pre/post JS, it would run on 
all the campaign and goal URLs until the valid values are present on the 
page.

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.