Integrate Wingify with Tealium Using the Tealium iQ Tag Manager

Overview

The Wingify SmartCode is a code snippet that must be present on your website for Wingify to run experiments, personalization, and other campaigns on it. If you use Tealium iQ Tag Management to manage the scripts on your website, you can deploy the SmartCode directly from Tealium iQ. This removes the need to modify your website's source code.

You can do this by adding the SmartCode as a JavaScript Code extension in Tealium iQ. This method does not use the Wingify tag from the Tealium Tag Marketplace.

Use this approach if you:

• Use Tealium iQ Tag Management to manage the scripts on your website.
• Want to integrate Wingify with Tealium iQ without using the Wingify tag from the Tag Marketplace.

Once the integration is set up, Tealium iQ loads the SmartCode on every page where it is deployed, and you can run your Wingify campaigns on those pages.

Add the Wingify SmartCode in Tealium iQ

The integration works by placing your Wingify SmartCode on your website via Tealium iQ. In this step, you copy the SmartCode for your website from your Wingify account, add it to Tealium iQ as a JavaScript Code extension, and publish the change so that Tealium iQ starts loading the SmartCode on your pages. 

Before you begin, make sure you have access to both your Wingify and Tealium accounts.

Step 1: Copy the Wingify SmartCode

To copy your Wingify SmartCode:

1. Log in to your Wingify account.
2. From the navigation menu on the left, go to Configurations > Websites and Apps.
3. Under Websites and Apps, select your domain.
4. Click the Code tab.
5. In the SmartCode section, make sure the Asynchronous option is selected. This step is mandatory.
   The SmartCode you add to Tealium iQ must be the Asynchronous version. By default, Wingify displays the Asynchronous SmartCode. If the Synchronous version is selected and displayed, switch back by performing the following steps:
   1. Click the More options icon at the top right corner of the SmartCode section, and select Settings.
   2. Select Asynchronous.
   3. Click Save.

6. From the SmartCode section, copy only the JavaScript that sits between the opening <script> and closing </script> tags. Start from the line window._wingify_code || (function() { 

   and end with
   
   })();

   Note: The SmartCode that Wingify displays is an HTML snippet, but the Tealium iQ JavaScript Code extension accepts only JavaScript. Pasting HTML into the extension causes JavaScript errors and prevents the SmartCode from loading on your website. When copying the code, ensure you do not copy the following lines:

   • the <!-- Start Wingify Async SmartCode --> comment
   • the <link rel="preconnect" ...> line
   • the <script ...> and </script> tags
   • the <!-- End Wingify Async SmartCode --> comment

Step 2: Add the SmartCode as a JavaScript Code Extension

Extensions in Tealium iQ let you run custom JavaScript on your website. By adding the Wingify SmartCode as a JavaScript Code extension, Tealium iQ runs it on your pages, so you don't need to paste it into your website's code or use the Wingify tag.

To add the Wingify SmartCode as a JavaScript extension:

1. Log in to your Tealium account.
2. From the left navigation, go to iQ Tag Management > Extensions.
3. Click +Add Extension. 
   The Extensions window appears.
4. In the Extensions window, search for JavaScript Code and click +Add next to it.
5. In the Title field, enter a name for the extension, for example, Wingify SmartCode.

6. From the Scope dropdown, select Pre Loader.

   Note: Selecting Pre Loader makes the SmartCode load before your other Tealium tags. Wingify recommends loading the SmartCode as early as possible on the page, so it can run quickly and apply your campaign changes without delay.
7. Under Configuration, paste the SmartCode you copied from Wingify into the code editor.
8. Click Save / Publish at the top right corner of the page.
9. In the Save a New Version window that appears, enter a note describing the change, for example, Add Wingify SmartCode.
10. Under Publish To, select the environments where you want the SmartCode to load (Dev, QA, and Prod).
11. Click Publish.

Once publishing is complete, Tealium shows a confirmation for each selected environment.

Verify the Installation

After you publish the extension and the changes are live, confirm that the SmartCode is installed correctly by performing the following steps:

1. In Wingify, go to Configurations > Websites and Apps, select your domain, and click the Code tab.
2. Use the SmartCode Checker to verify that the SmartCode is installed on your page URL.

If the verification is successful, the SmartCode Checker confirms that the SmartCode is installed on your page. This means Tealium iQ is loading the Wingify SmartCode on your website, and the integration is complete. You can now create and run your Wingify campaigns on the pages where the SmartCode loads.

If the checker doesn't detect the SmartCode, wait a few minutes for the changes to reflect on your website, and then check again. If the SmartCode is still not detected, make sure you have published the extension to the correct environment in Tealium iQ, or contact Wingify Support.

Need more help?

For further assistance or more information, contact Wingify Support.