Ways to Add Custom Attribute / Event Code to your Webpages

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:

• VWO Editor
• Tag managers like Google Tag Manager(GTM)

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.

• 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 Rollouts campaign to roll out 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.
  

Via Tag Managers

If you are using tag managers like Google Tag Manager (GTM) to manage JavaScript and HTML tags, you can use the same to push the custom attribute/custom event code snippet to your website. Log in to Google Tag Manager and perform the following steps:

1. From your GTM admin dashboard, click on Tags > New. The new tag window appears.
2. To choose a Tag type, click on the Tag Configuration section and select Custom HTML from the tags list.
3. 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.
   
4. 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.