Customize Universal Pixel Integration Addon
Add a Universal Pixel Editor Field to an Existing Document Type
For content-driven pages (as opposed to landing pages), Universal Pixel data can be specified per document. If you want to do that, add the Universal Pixel Variables mixin to the desired document types.
Once you commit and publish the changes with the new Universal Pixel Variables mixin, editors will be able to set Universal Pixel variables per document.
Pixel Scriptlet Location and Head Contributions
In the end, Universal Pixel data contribution is done through JavaScript scriptlets on a page, like this:
<script type="text/javascript">
var br_data = {
"page_type":"search",
"page_labels":"bloomreach,documentation",
"cmscategories":"news",
"acct_id":"****",
"domain_key":"",
"type":"pageview"
};
</script>
<script type="text/javascript">
(function() {
var brtrk = document.createElement('script');
brtrk.type = 'text/javascript';
brtrk.async = true;
brtrk.src = '//cdns.brsrvr.com/v1/br-trk-****.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(brtrk, s);
})();
</script>
The scriptlets consist of two parts:
- Definition of the Universal Pixel Data JavaScript object: var br_data = { ... }
- Dynamic retrieval of the Universal Pixel Tracker Library
The Universal Pixel Integration addon internally uses the HST Head Contributions feature and contributes both scripts using the "scripts" category value.
Typically, the base layout template (e.g. repository-data/webfiles/src/main/resources/site/freemarker/myproject/base-layout.ftl) specifies the <@hst.headContributions /> tag for the "scripts" category, which causes the scriptlets to be included at the bottom of each page:
<!doctype html> <#include "../include/imports.ftl"> <html lang="en"> <head> <#-- SNIP --> <@hst.headContributions categoryExcludes="htmlBodyEnd, scripts" xhtml=true/> </head> <body> <#-- SNIP --> <@hst.headContributions categoryIncludes="htmlBodyEnd, scripts" xhtml=true/> </body> </html>
Configure Head Contribution Category Values
By default, both scriptlets are contributed using the default category value, "scripts". To set a different category value for each scriptlet, add the following properties in /WEB-INF/hst-config.properties in the webapp web application:
# Head contribution category name for the Universal Pixel Data JavaScript variable scriptlet universalpixel.trackingDataHeadContributionCategory = pixel-data-scriptlet # Head contribution category name for the Universal Pixel Tracker library inclusion scriptlet universalpixel.trackingJslibHeadContributionCategory = pixel-jslib-scriptlet
Above example makes the web application use the value "pixel-data-scriptlet" for the category of the head contribution for defining the pixel data object, and the value "pixel-jslib-scriptlet" for the category of the head contribution for dynamically including the tracking library.
If you customize the Head Contribution category values, make sure to update the layout page accordingly, as follows:
<!doctype html> <#include "../include/imports.ftl"> <html lang="en"> <head> <#-- SNIP --> <@hst.headContributions categoryExcludes="htmlBodyEnd, scripts, pixel-data-scriptlet, pixel-jslib-scriptlet" xhtml=true/> </head> <body> <#-- SNIP --> <@hst.headContributions categoryIncludes="htmlBodyEnd, scripts" xhtml=true/> <#-- Now, let's add separate head contributions for Universal Pixel scriptlets here. --> <@hst.headContributions categoryIncludes="pixel-data-scriptlet" xhtml=true/> <#-- Note: you can also include any custom JavaScript scriptlets here by using Head Contributions with a specific category for customization purposes. --> <@hst.headContributions categoryIncludes="pixel-jslib-scriptlet" xhtml=true/> </body> </html>
You can include any custom JavaScript scriptlets between the two Universal Pixel Integration scriptlets for customization purposes. e.g. tweaking or automatic addition/updating of Universal Pixel variables based on domain specific knowledge.