In order for your custom events and custom attributes to work, their respective custom codes should be applied to your website. To do so, you can either directly copy the custom code snippet and paste it into your code repository with the required variables or use one of the following ways:
Via VWO Editor
VWO Editor provides you with the Code Editor feature, through which you can apply your custom attribute code/custom event code to your webpages. You can apply the code by adding it as Pre-Campaign JS or Post-Campaign JS.
The Pre-Campaign JS code snippet triggers on both the campaign and the metric pages, while the Post-Campaign JS code triggers on the campaign pages only.
ATTENTION: You need to run the campaign across all those webpages where you want this code to be applied.
NOTE: The Pre/Post campaign JS executes only when the campaign is running.
- Adding as Pre-Campaign JS Code
The Pre-campaign JS code applies the event and attributes dynamically to your website before the campaign gets executed. This means that you can apply the custom codes to your website before creating variations or experiences out of it. This code triggers the conditions on both the campaign and the metric pages. Therefore, triggering the custom codes via the pre-campaign JS code to your website will not work if done on the same campaign where you want to create variations or experiences. To overcome this, you may parallelly create a VWO Deploy campaign to deploy the custom codes to your website dynamically.
To apply the custom code via the Pre-Campaign JS option, access VWO Editor > Code Editor > Campaign JS/CSS, and paste the custom attribute/custom event code snippet under the Pre-Campaign JS section.
- Adding as Post-Campaign JS Code
Access VWO Editor > Code Editor > Campaign JS/CSS, and paste the custom attribute / custom event code snippet under the Post-Campaign JS section. This code triggers on the campaign pages only.
NOTE: If the custom attribute/custom event code is entered via the pre/post-campaign JS option, it will execute on campaign and goal URLs (if applicable) until the valid values are present on the page.
Via Tag Managers
- From your GTM admin dashboard, click on Tags > New. The new tag window appears.
- To choose a Tag type, click on the Tag Configuration section and select Custom HTML from the tags list.
- Paste the custom attribute/custom event code snippet in the HTML text box under the Tag Configuration section.
ATTENTION: Ensure that you add the proper tags and TAG_VALUE in the code snippet.
- Now, you need to choose a trigger to fire the tag. Click on the Triggering section and select All Pages to fire the custom attribute/custom event code 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.