- Custom CSS and HTML markup for your widget provided by Po.St.
How to configure
Step 1: Configure the Po.St widget settings in the Generic Tag
- Go to Tealium's Tag Marketplace and add the Generic Tag to your profile. The Tag Settings window will appear.
- The default Title is "Tealium Generic Tag". Replace it with a more descriptive name. Example: Po.St Widget V3 Custom Tag.
- Drop down the Type list and set it to "Script".
- 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.
- 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.
- Data Mappings are optional. You may use the Mapping toolbox if you wish to send custom data to Po.St.
- Drop down the 'Scope' list and set it to 'Preloader'. This will render the CSS before the Data Layer is built.
Step 3: Implement your custom HTML via Content Modification Extension
NOTE: The 'Scope' of this Extension is hard set to DOM-READY.
- Add a new Content Modification Extension to your profile. Give it a suitable title.
- The default 'Element Type' is set to 'DOM ID'; leave it as is.
- 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.
- Drop down the 'Position' list and set it to 'After Node' (what is After Node?).
- 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: