Ways to Add Custom Attribute or Event Code to your Webpages – Wingify

close this to read article

This article covers the following:

Overview
Add Custom Code Using Wingify Editor
Add Custom Code Using a Tag Manager

Overview

Prerequisite: For custom events and custom attributes to function correctly, their respective code snippets must be implemented on your website. Additionally, at least one active campaign must be running on the relevant webpage.

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:

Wingify Editor
Tag managers like Google Tag Manager(GTM)

Add Custom Code Using Wingify Editor

Wingify 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 the webpages where you want this code 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 it dynamically to your website before the campaign gets executed. This means you can apply the custom code to your website before creating variations or experiences from 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 on your website will not work if done on the same campaign where you want to create variations or experiences. To overcome this, you can simultaneously create a Wingify Rollouts campaign to dynamically deploy the custom code to your website.

To apply the custom code via the Pre-Campaign JS option, access Wingify 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 Wingify Editor > Code Editor > Campaign JS/CSS, and paste the custom attribute/custom event code snippet under the Post-Campaign JS section. This code triggers only on the campaign pages.

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.

Add Custom Code Using a Tag Manager

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:

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. Go to the Triggering section, then select a trigger based on your requirement - either a specific tag or All Pages if you want the custom attribute/event code to fire on every page.

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.

Need more help?

For further assistance or more information, contact Wingify Support.