jQuery clickHandler 'Add to Cart' Extension Setup

[vu_bui]

I am trying to tag/track the event of a customer "add to cart." I've followed instructions on using WebCompanion's On-Page Element Selector tool, found the appropate jQuery class or id, and have added it under Extensions. I am unable to get the information passed through Tealium onto KISSmetrics. All the information is listed below. Please advise and thanks in advance! jQuery Selector: .ts-btn-cart Trigger On: mousedown (I've also tried 'click') Tracking Event: link Set: event_type (js) To (JS Code): _kmq.push(['record', 'added to cart']); I feel like I'm not doing this right, missing something integral to getting it to populate, or just don't get it period. Either way, it would be great to get some assistance. Thanks! -Vu

[Clint · Accepted solution]

Hi Vu, Rather than calling {code:javascript}_kmq.push(...){code} directly you should: 1) Make sure you have the Kiss Metrics tag added and configured in Tealium iQ 2) When adding the jQuery onHandler extension: - a) set your selector - b) set your tracking event to click - c) create (or select an existing) data source from the first "Set" drop down list (for instance kmq_record) to Type "text" and value "added to cart" (without the quotation marks) - d) repeat C for any other values you want to pass to KissMetrics 3) return to the Tags tab and click on Edit for Mapped Data Sources 4) Select "kmq_record" (or the data source you are using) from the Data Sources drop down 5) Click "Select Destination" 6) From the Mapping Toolbox, select "Record" 7) Apply 8) Repeat for any other variables you are setting in the jQuery onHandler extension to pass to KissMetrics 9) Save/Publish your new config to Dev or QA for testing Assuming that you have your handler identified correctly, it should work at this point.

[vu_bui]

Thanks Clint! That definitely worked and I am starting to see "added to cart" come through on KM now. I am however, slightly discouraged in moving forward. Is this type of comprehension something that comes with attending Tealium Univeristy, or is it simply through asking experts such as yourself and letting it absorb over time? I still have a handful of other questions, but you definitely help solve this one! Regards, Vu

[Clint]

Hey Vu, don't be discouraged! The key is to understand that our TMS is designed to ease the complexity of working with tags and that works best when working within the framework of the TMS. It simply takes a different point of view. We absolutely cover the best practices surrounding working with tags in the TMS whether or not you are using an Extension to capture the required data (we cover extensions too). You can see our schedule of events at www.tealiumuniversity.com. Additionally, the fundamentals are covered in our weekly webinars. You can go to this post: https://community.tealiumiq.com/t5/Announcements/Tealium-University-Training-Calendar/m-p/1543 and sign up for the webinars. We are always here to answer questions and it's very likely that there are others in the community with similar questions to yours and they will benefit from you sharing your challenges and getting answers here in the community. It's simply up to you to decide which avenue is best to get the answers you need given whatever factors (time to answer, sensitivity of the issue, etc).

[vu_bui]

Thanks Clint. I think my team and I will have to buckle down and see if we can piece it all together in the next few weeks. Now that 'add to cart" is working - thanks to your suggestion - how would I go about getting properties of the "add to cart" event to show up (i.e. product name, category, price)? I attempted to add properties in additional 'Set" and 'To' rows, but all that did was create separate events. The result was me seeing KM report that 'dresses' or 'accessories' was a recurring event. Once again, your help would be greatly appreciated. Thanks! -Vu

[Clint]

Vu, I've asked our Solutions team to take a look at your last question because I'm not sure of the proper solution. Stay tuned.

[adam_wolfers]

Hi Vu, It looks like our KissMetrics tag template could use some updating. Would you mind sending over the technical implementation guide you have from them and we'll compare it with our current integration? Cheers, Adam

[andrew_rose]

Hi Vu, This will work, but not as a link at the moment. What you can do instead is use a utag.view to send the required information such as category, product name, price and record value (page name). For your particular link, it would look like this: jQuery(" .ts-btn-cart").on("mousedown",function(){utag.view({category:"clothing",product_name:"red_shoes",price:"124.95",record_value:"added_to_cart"})}) and then the mapping in the tag would look like the image above. Both of these together would result in a browser request that is correctly formatted, like this: http://trk.kissmetrics.com/e?category=clothing&price=124.95&product_name=red_shoes&_n=added_to_cart

[vu_bui]

Hi Adam, Sure thing! Hope this helps. https://app.kissmetrics.com/setup/integration/added_to_cart#code -Vu

[david_ung]

Hi there, Tealium has since updated the KISSmetrics tag and the previous recommend settings from Clint no longer seem to be working. From looking at the utag.js of KISSmetrics, the "u.send = function(a, b, c, d, e, f)" has been completely rewritten. There are some recommendations that appear under the Tips section, but I'm not sure at what I'm mapping under the Data Mappings tab. _kmq.push mapping examples: ['record', 'EVENT_NAME'] ['record', 'EVENT_NAME', {'PROPERTY_NAME':'VALUE'}] ['record', 'EVENT_NAME', {'PROPERTY_NAME':'VALUE'}, CALLBACK_FUNCTION] ['set', {'PROPERTY_NAME':'VALUE'}] ['identify', 'IDENTITY'] For example, how do I now set the customer_email to 'identify'? I'm referencing the API's common methods here: http://support.kissmetrics.com/apis/common-methods#integrations-list. Thanks!

[adam_wolfers]

Hi David, In the current KISSmetrics tag, you can set customer_email to "identify" by making a JavaScript call like this: utag.link({"km_identify", ["identify", utag_data.customer_email]}); You can use the jQuery onHandler extension to trigger this JavaScript call when the user logs in. This example assumes you have the following setup: 1. A Universal Data Object (UDO) called "utag_data", where the customer's email address is stored in a parameter called "customer_email". You can replace "utag_data" with whatever your UDO is called. 2. A Data Source in Tealium iQ called "km_identify". You can replace "km_identify" with whatever Data Source you'd like to use here. 3. A mapping in your KISSmetrics tag between "km_identify" (or your Data Source of choice for this event) and "kmq_push". Please let me know if this answers your question or if you need more info. Thanks, Adam

[david_ung]

Thanks for the prompt reply, Adam. For the data source type for 'km_identify', should I stick with UDO Variable? Edit: I've set it to UDO Variable. ============================== So I've got my KISSmetrics Tag to look like this: km_identify => kmq_push km_record => kmq_push And in my Extensions km_identify => JS Code: utag.link({"km_identify ", ["identify", utag_data.customer_email]}); I've set the extension type to Set Data Values instead of onHandler, because I'd like to track the user throughout the site. Unfortunately, I'm receiving an error with the JavaScript: "Uncaught SyntaxError: Unexpected token , " u.ev={'view':1,'link':1};u.map={"km_identify":"kmq_push","km_record":"kmq_push"};u.extend=[function(a,b){if(1){try{b['km_identify']=utag.link({"km_identify",["identify",utag_data.customer_email]});}catch(e){}}}];u.send=function(a,b){if(u.ev[a]||u.ev.all!==undefined){var c,d,e,f,i;u.data={"kmkey":"[KEY REMOVED]","base_url_1":"//i.kissmetrics.com/i.js","base_url_2":"","order_id":"","order_total":"","order_subtotal":"","order_shipping":"","order_tax":"","order_store":"","order_currency":"","order_coupon_code":"","order_type":"","customer_id":"","customer_city":"","customer_state":"","customer_zip":"","customer_country":"","product_id":[],"product_name":[],"product_sku":[],"product_brand":[],"product_category":[],"product_subcategory":[],"product_quantity":[],"product_unit_price":[],"product_discount":[]};for(c=0;c

[david_ung]

After debugging the JS, looks like all I needed was to add ["identify", utag_data.customer_email] instead of appending it with utag.link since it's already in the function. For future reference, I was able to get values to populate in KISSmetrics when adding an item to the cart by adding this snippet of code to the JS Code option when using the jQuery onHandler event: ["record", "Added to Cart", { "Product Name":utag_data.product_name, "Product Price": utag_data.product_list_price, "Product SKU": utag_data.product_sku, "Product Category":utag_data.product_category }] This was set to "km_record", which is set to use "kmq_push" under the KISSmetrics Tag Mapped Data Sources area. Hope that helps someone out there. Thanks.