Apart from manually adding the custom dimension code in the source code of your webpages, You can add the Custom Dimension code using:
- VWO Editor
- 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
- Adding Post-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
- Login to Google Tag Manager.
- In your GTM admin dashboard, select Tags.
- To create a new tag, click New.
The new tag window appears.
- To choose a Tag type, click anywhere in the Tag Configuration section.
- From the tags list, select Custom HTML.
ATTENTION: Make sure to add the proper tags and TAG_VALUE in the code snippet.
- To choose a trigger to make the tag fire, click anywhere in the Triggering section.
- 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.