Implementing a custom Po.St Widget Tag (V3) via Tealium iQ

[#1]

This article describes how to use Tealium's Generic Tag, in conjunction with Extensions, for delivering a customized Po.St Widget Tag (V3) on your site. The Generic Tag is ideal for loading external JavaScript files and simple image requests if the vendor Tag of choice is NOT available in Tealium's Tag Marketplace.

Prerequsites

• Po.St JavaScript file url
• Custom CSS and HTML markup for your widget provided by Po.St.
• A custom Javascript or jQuery for rendering the CSS.

How to configure

Step 1: Configure the Po.St widget settings in the Generic Tag

1. Go to Tealium's Tag Marketplace and add the Generic Tag to your profile. The Tag Settings window will appear.
2. The default Title is "Tealium Generic Tag". Replace it with a more descriptive name. Example: Po.St Widget V3 Custom Tag.
3. Drop down the Type list and set it to "Script".
4. In the HTTP URL field, enter the .js file url provided to you by Po.St.
   NOTE: The HTTPS URL and Static Params fields are optional; you may leave them blank.
   

   

5. Go to the Load Rules tab and select the Rule condition of your choice. With Load Rules, you can determine when and where to load the Tag (i.e. the widget) on your site.
   The default Rule is set to 'Load on All Pages' and it is recommended. If you want the widget to be displayed on specific pages or within a time range, you must create and apply a custom Rule condition.
   

   

6. Data Mappings are optional. You may use the Mapping toolbox if you wish to send custom data to Po.St.

Step 2: Implement your custom CSS via JavaScript Code Extension.

You'll use the Extension to write a JavaScript/jQuery code for rendering the CSS.

1. Add a new JavaScript Code Extension to your profile. Give it a suitable title.
2. Drop down the 'Scope' list and set it to 'Preloader'. This will render the CSS before the Data Layer is built.
3. Write the JavaScript code as you would in any editor.
   NOTE: Do not wrap your code in <script></script> tags since the Extension will be included in a JavaScript file.
   

   

Step 3: Implement your custom HTML via Content Modification Extension

NOTE: The 'Scope' of this Extension is hard set to DOM-READY.

1. Add a new Content Modification Extension to your profile. Give it a suitable title.
2. The default 'Element Type' is set to 'DOM ID'; leave it as is.
3. In the Identifier field, enter the DOM ID value of the element you wish to modify.
   How to find it? Launch the Web Companion in your site and use the built-in On-Page Element Selector tool to focus the cross-hairs on the target element.
4. Drop down the 'Position' list and set it to 'After Node' (what is After Node?).
5. Paste the HTML markup in the Content editor.
   NOTE: This should be standard HTML markup. Do not use single quotes.
   

   

Step 4: Save/Publish your profile.

That's it! Your implementation is complete. Depending on which pages you have chosen to display your widget on, it will look something like this: