Implement Sitewide JS on Your Website

Overview

Wingify's Sitewide JS feature offers a powerful way to inject custom code that executes before any Wingify campaigns run on your website.

Imagine these scenarios:

• Custom Events Triggering and Visitor Attribute Sync: Use the Sitewide JS to add custom events or synchronize visitor attributes that are common across your Wingify campaigns. This saves from repetitive application of the same events and attributes.
• Advanced User Segmentation: Access and process website data (cookies, local storage) to define custom user attributes for Wingify. This allows you to segment visitors based on specific criteria beyond what Wingify natively supports.
• Third-Party Integration: You can use the Sitewide JS to apply custom integration code that works across multiple Wingify campaigns. This approach ensures consistency and efficiency in your integrations, reducing the need for repetitive coding.
• Track Version History: Wingify automatically saves a new version of your Sitewide JS every time you edit and save changes. This allows you to track modifications over time and provides a safety net for your custom code.

With the Sitewide JS implementation, you can apply code across your website before the execution of your Wingify campaigns. This ensures that a layer of change is applied, on top of which your campaigns can be executed.

You can also apply it to all your subdomains in a single click.

Configure the Sitewide JS Code Settings

If you have registered your website on Wingify, on the main menu of your Wingify dashboard:

1. Go to Configurations > Websites and Apps > select your website.
2. Go to the Sitewide JS tab, where you can implement your sitewide JS code.
3. In the Sitewide JS editor, write the JavaScript code required for your use case.
4. Select the Run on all sub-domains checkbox to ensure the JS code runs on all pages of your website where you want to apply the segmentation.
5. Use the Wait for DOM ready to execute the JavaScript code checkbox to control when your Sitewide JavaScript is executed on the page.
   1. When enabled, Wingify waits until the DOM is ready before executing the Sitewide JS.
   2. When disabled, the Sitewide JS executes as soon as the Wingify SmartCode loads.

Implement a Sitewide JS Code (Example)

Imagine you want to display your website content in different languages based on visitor preferences stored in local storage. You can use this information to A/B test dynamic content on your website.

Challenge:

You want to test the effectiveness of different dynamic content elements (e.g., headlines, articles, banner messages) on your webpage based on visitor language. However, the website uses local storage to store language preferences in JSON format, which cannot be directly used for segmentation in Wingify campaigns.

Solution:

Sitewide JS Implementation:

1. Write a JavaScript (JS) code snippet to extract the language code from local storage and set it in a global JS variable.

// Example code to set the language preference in a global variable

var languagePreference = JSON.parse(localStorage.getItem('languagePreference'));

window.setLanguage = languagePreference.code; // Assuming the language code is stored under the 'code' key

Target Wingify Campaign Variations:

1. In Wingify, go to your campaign settings.
2. Navigate to Custom Segment > JS Variable.
3. Enter the name of the JS variable (e.g., setLanguage).
4. Choose the appropriate operator (e.g., equals).
5. Enter the value of the JS variable that corresponds to the language codes used in your sitewide JS (e.g., “en-US”, “fr-FR”).

By setting up this segmentation, you can now apply a language-based layer of change on your website before implementing any campaign changes. This ensures that your tests and optimizations are based on the correct visitor data, providing more accurate and relevant results.

Access Version History

The Version History automatically saves a new version of your Sitewide JS every time you edit and save changes to the JS code. This allows you to track modifications over time and provides a safety net for your custom code. For example, if you deploy a new piece of JavaScript that introduces an unexpected bug on your website, you can use the Version History to revert to a previous, stable version quickly.

With version history, you can:

• View a timeline of all saved changes.
• Restore any previous version of your code.
• Assign custom names to specific versions for easy identification.

• This feature is enabled by default. The system automatically begins tracking versions as soon as you save any change to the Sitewide JS code.
• The version history retains only those versions that are saved within the last 30 days. Versions older than 30 days are not available for restoration.
• The Current version is always displayed in the version history, even if it is older than 30 days.

To view the version history:

1. Click the Version history link on the Sitewide JS tab. A Version history panel appears, showing a timeline of all saved versions, with the most recent one labeled Current.
2. To manage a previous version, click next to it. You have three options:
   1. View this version: Opens a pop-up displaying a side-by-side comparison of the changes. The Before pane shows the code from the previous version, and the After pane shows the code saved in this selected version. You can also choose to Restore this version directly from this view.
   2. Restore this version: This option allows you to restore an older version.

   3. Name this version: Lets you assign a custom name to the version for easier identification and reference.

      Tip: Before making significant changes to your Sitewide JS, use the Name this version option on your current version. This creates an easy-to-find backup (for example, Pre-Checkout-Redesign) if you need to revert.

To restore a previous version:

1. From the Version history list, find the version you want to restore, click and select Restore this version. A warning pop-up appears.

   Note: Restoring an earlier version of your Sitewide JS will impact any active Wingify campaigns that rely on the current code.
2. To proceed, select Restore.

The system restores the selected code. The Version history list refreshes, and the restored version is now labeled as Current.

Need more help?

For further assistance or more information, contact Wingify Support.