Using JavaScript - Tags, identification and Abandoned Cart
In this topic we will go more in detail on how to set up the JavaScript in specific cases:
Tags
Types of tags
Site offers 2 types of custom tags: numerical and textual.
Numerical
This type of tag will typically be used to track a scoring for each visitor or action of a visitor. The values which are tracked through this type of tag are aggregated.
Example: Lead scoring.
By qualifying every page on the customer’s website with a specific score, we can track a scoring for each visitor on the website. If the website of the customer contains a web shop, we could separate the leads which are interested in the customer’s products by giving the web shop pages a higher “score” then other sections of the website (e.g. home page, info page, …). If the visitor passes a certain threshold we can then try to convince the visitor to return to the website at a later time (for example by showing a “subscribe to newsletter” popup on the website).
Textual
With textual tags we can capture text values, which can even contain hierarchical data up to 5 levels deep. Typically, this type of tag will be used to track the navigation throughout the website or the product catalog (categories/interests) in a web shop. With the data that is tracked (most popular page or product category) we can then personalize content on the customer’s website.
Example:
Show specific offers to the visitor based on the category the visitor was most interested in during his previous visits.
Tag population
The custom tags need to be populated by the Site script. This can be done using 3 possible methods: Meta-tags, Xpath or by manually triggering them through JavaScript.
Meta-tags
With this type of tag population Site looks at the meta tags of a page on the customer’s website and uses the value of this meta tag to track information of the visitor.
Example:
If the website of the customer contains on each page a meta tag containing the product category, we could simply link this meta tag to a custom tag in Site and Sitewill automatically track all hits of each category in a custom tag. By using this tag, we could then determine the favorite product category of each visitor.
Xpath
With this type of tag population Site looks at the structure of the website to determine if a certain tag should be hit. Site uses Xpath, a query language to look for specific “nodes” inside a XML or HTML document, to determine if a specific tag should be hit.
Example:
If on each product page there is a specific location in the website that contains the name of the product category related to the current product, Site will automatically track all hits of each category in a custom tag. By using this tag, we could then determine the favorite product category of each visitor.
Manual tagging
With this type of tag population, it is required for the website of the customer to manually execute Site tracking calls through JavaScript.
Example:
If a visitor lands on a product page of the customer’s website, a tracking call has to be executed through JavaScript to notify Site that the visitor landed on a page related to a specific product category.
This is an example of such a call:
wa.bt_queue.push({
"isEvent": true,
"tagValues": [{
"tag": "PRODUCT_CATEGORY",
"value": "Telecom"
}]
});You should see a new tracking call show up in the network tab of your browser’s debugging console containing the new tag value in the request JSON:
{
"universeId": "c853d6db-1781-40fe-abf4-7872ea9cc79b",
"profile": null,
"profileId": "7ZjY5YzgzMDYtZTcwZC00MzdmLTg5MTEtYjczZTRmOTI5NDI0OzODQ0MzY5YTUtOTIzYS00MTcwLWJkZjAtNTExNmFmNDM3NDI4OzsA:",
"url": "https://www.yourwebsite.com/",
"referer": "",
"isEvent": true,
"tagValues": [{
"tag": "PRODUCT_CATEGORY",
"value": "Telecom"
}],
"allowCookies": true,
"allowLocalStorage": true,
"pageTitle": "",
"metaTags": {}
}
Other examples:
// --- single value into the "manufacturer" attribute, using the PUBLIC NAME of the tag ---
wa.bt_queue.push({
"tagValues": [{
"tag": "VEHICLES",
"value":"audi"
}]
});
// +++ provide a "score" to increment an attribute by more than one: +++
wa.bt_queue.push({
"tagValues": [{
"tag": "VEHICLES",
"value":"honda",
"score":3
}]
});
// ~~~ possible to populate more than one manufacturer in one call: ~~~
wa.bt_queue.push({
"tagValues": [{
"tag": "VEHICLES",
"value":"volkswagen"
},{
"tag": "VEHICLES",
"value":"skoda",
"score":5
}]
});
// *** second-level hierarchy population, using "category_subcategory" format: ***
wa.bt_queue.push({
"tagValues": [{
"tag": "VEHICLES",
"value":"ford_escort"
}]
});
// === similarly, can intermix different levels (and scores): ===
wa.bt_queue.push({
"tagValues": [{
"tag": "PRODUCTS",
"value":"wine_white"
},{
"tag": "PRODUCTS",
"value":"beer_strong_dark",
"score":7
},{
"tag": "PRODUCTS",
"value":"beer_strong_ipa"
}]
});
Tag decreasing
Tag decreasing is a mechanism that has been put in place to define the relevancy of current and historical captured tag-data. Through this mechanism captured data decreases or decays over time. Decrease is calculated with each new hit, and is not calculated on a daily basis.
Tags have a standard decrease setup. This setup is defined per universe inside the universe configuration. The Standard setup is a decrease of 30% a week, but the decrease setup can be overruled on a global tag level and for each individual tag.
Identification
Site tracks both anonymous and identified visitors. Site offers 2 ways to identify visitors: CRM identified and custom identified.
CRM identified
CRM identified visitors are visitors which are known in Campaign. These visitors get identified when they enter the website when coming from a page or email sent from the Campaign Audience List that is also linked to the Site universe. We attach a unique identifier (m_bt) to each link when coming from a Campaign mail/page. When the Site script notices this URL parameter it links the current visitor to the known Campaign profile so that we know which contact from the Campaign Audience List is currently visiting the website.
From that point on every tracking call done to Site will have the parameter “profileInfo.isCRMIdentified” set to true in the response. This is an automated process, so no custom calls need to be implemented, except for the initial tracking call when the page is loaded.
Custom identified
Custom identified visitors are visitors which are known by the customer’s website. This identification is done based on a unique identifier which is configured in the Site configuration and which should also be stored on the Campaign Audience List that is configured in the Site universe.
A visitor will typically get custom identified when they create an account or log in to the website. At that time the unique identifier needs to be sent to Site so that we can link the visitor to a profile in Site, for example:
wa.bt_queue.push({"customIdentifier": "a1b2c3d4e"});From that point on every tracking call done to Site will have the parameter “profileInfo.isCustomIdentified” set to true in the response.
Abandoned Cart
With a Site abandoned cart we can trigger a journey, which commonly triggers an email in Campaign. Because we are targeting existing contacts this can only be done when the visitor is a CRM identified visitor.
Site does not automatically track the shopping cart on the customer’s website, this must be done manually by executing the necessary JavaScript calls to Site. Multiple abandoned carts can be defined in Site, so every call needs to include the unique public cart name.
Add item to cart
When a visitor adds one ore more items to the shopping cart Site needs to be notified of this action. This is done by sending the product ID, price and item count for each of the products that are added in one BT.addCartItems request:
BT.addCartItems("PUBLIC_CARTNAME_IN_APPLICATION", [{ id: %PRODUCT_ID%, value: %PRICE%, count: %COUNT% }] );Executing such a request resets the internal Site timer for that abandoned cart.
Remove item from cart
When a visitor removes one ore more items from his shopping cart Site needs to be notified of this action. This is done by sending the product ID and item count for each of the products that are removed in one BT.removeCartItems request:
BT.removeCartItems("PUBLIC_CARTNAME_IN_APPLICATION", [{ id: %PRODUCT_ID%, count: %COUNT_TO_REMOVE% }] );Executing such a request resets the internal Site timer for that abandoned cart.
Checkout cart
When the visitor finishes his order Site needs to be notified of this action. This is done by executing BT.checkoutCart request:
BT.checkoutCart("PUBLIC_CARTNAME_IN_APPLICATION", true);Executing such a request completely removes the internal Site timer for that abandoned cart, meaning that no journey will be triggered for the current visitor.
Clear/empty cart
When all items need are removed from the shopping cart Site needs to be notified of this action. This is done by executing a BT.clearCart request:
BT.clearCart("PUBLIC_CARTNAME_IN_APPLICATION");Executing such a request completely removes the internal Site timer for that abandoned cart, meaning that no journey will be triggered for the current visitor.
Cart tracking calls
For each of the abandon cart calls you should see a new tracking call appear in the network tab of your browser’s debugging console, containing the “carts” node in the request JSON.
{
"universeId": "c853d6db-1781-40fe-abf4-7872ea9cc79b",
"profile": null,
"profileId": "7ZjY5YzgzMDYtZTcwZC00MzdmLTg5MTEtYjczZTRmOTI5NDI0OzODQ0MzY5YTUtOTIzYS00MTcwLWJkZjAtNTExNmFmNDM3NDI4OzsA:",
"url": "https://www.yourwebsite.com/",
"referer": "",
"isEvent": true,
"carts": [{
"cart": "MyCart",
"action": "Add",
"items": [{
"id": "39289",
"value": "4.99",
"count": 1
}]
}]
"tagValues": [],
"allowCookies": true,
"allowLocalStorage": true,
"pageTitle": "",
"metaTags": {}
}Product list
The product ID, which is sent in the addCartItems and removeCartItems calls, should always refer to an existing product in the product list that is configured in the Site universe.
Rebuild shopping cart
Important to keep in mind is that Site does not automatically rebuild the shopping cart when the visitor returns to the website. This is something that needs to be implemented by the website itself.
It is however possible to send a unique shopping cart (rebuild) id to Site through tagging, which can be added to links that return to the website when clicking in the abandoned cart email. Again, the website itself needs to make sure that the correct shopping cart data is loaded when landing on the website
