[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"docs-en-\u002Fen\u002Fdocs\u002Fcustom-tracking":3},{"id":4,"title":5,"body":6,"category":925,"code_examples":926,"demos":926,"description":927,"extension":928,"meta":929,"navigation":926,"order":208,"path":930,"seo":931,"sitemap":939,"stem":941,"tags":942,"toc":228,"videos":926,"__hash__":946},"docsEn\u002Fen\u002Fdocs\u002Fcustom-tracking.md","Custom Tracking - Track User Interactions",{"type":7,"value":8,"toc":901},"minimark",[9,14,18,23,28,45,75,79,86,100,114,118,121,125,131,134,151,155,158,283,287,294,300,353,356,518,522,529,567,570,574,577,581,595,599,604,675,679,743,759,761,765,768,772,787,792,806,813,817,830,832,836,840,882,886,897],[10,11,13],"h1",{"id":12},"custom-tracking-event-tracking","Custom Tracking (Event Tracking)",[15,16,17],"p",{},"Konektor features an advanced automatic tracking system. Before adding manual tracking, it is important to understand what is already tracked automatically.",[19,20,22],"h2",{"id":21},"auto-tracking-vs-manual","Auto-Tracking vs Manual",[24,25,27],"h3",{"id":26},"link-rotator-automatic","✅ Link Rotator (Automatic)",[15,29,30,31,35,36,40,41,44],{},"If you are using ",[32,33,34],"strong",{},"Konektor Link Rotator"," (e.g., ",[37,38,39],"code",{},"link.brand.com\u002Fwa\u002Fcs-ratna",") on your landing page, you ",[32,42,43],{},"DO NOT NEED"," to add any tracking code.",[46,47,48,63,69],"ul",{},[49,50,51,54,55,58,59,62],"li",{},[32,52,53],{},"Clicks"," are tracked automatically as ",[37,56,57],{},"ViewContent"," \u002F ",[37,60,61],{},"Click",".",[49,64,65,68],{},[32,66,67],{},"WhatsApp Redirects"," are tracked automatically.",[49,70,71,74],{},[32,72,73],{},"Conversions"," are tracked when detailed conversations occur.",[24,76,78],{"id":77},"️-custom-tracking-manual","🛠️ Custom Tracking (Manual)",[15,80,81,82,85],{},"Use the guide on this page ONLY if you want to track interactions ",[32,83,84],{},"other than"," the Link Rotator, such as:",[46,87,88,91,94,97],{},[49,89,90],{},"\"Add to Cart\" buttons.",[49,92,93],{},"Website registration forms.",[49,95,96],{},"E-book \u002F PDF downloads.",[49,98,99],{},"Links to Marketplaces (Amazon\u002FShopee).",[101,102,104],"info",{"title":103},"Summary",[15,105,106,107,110,111,62],{},"Using Link Rotator? ",[32,108,109],{},"It's Automatic",".\nUsing other buttons? ",[32,112,113],{},"Use Custom Tracking below",[19,115,117],{"id":116},"method-1-css-classes-easiest","Method 1: CSS Classes (Easiest)",[15,119,120],{},"This method is perfect for non-technical users. You simply need to add a special class name to the HTML element you want to track.",[24,122,124],{"id":123},"usage","Usage",[15,126,127,128,62],{},"The class format used is ",[37,129,130],{},"k-event-{EventName}",[15,132,133],{},"Examples:",[46,135,136,141,146],{},[49,137,138],{},[37,139,140],{},"k-event-AddToCart",[49,142,143],{},[37,144,145],{},"k-event-Lead",[49,147,148],{},[37,149,150],{},"k-event-Contact",[24,152,154],{"id":153},"_1-track-button-clicks","1. Track Button Clicks",[15,156,157],{},"Add the class to a button or link. When a user clicks the button, the event will be sent.",[159,160,165],"pre",{"className":161,"code":162,"language":163,"meta":164,"style":164},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003C!-- Track 'AddToCart' event when button is clicked -->\n\u003Cbutton class=\"btn btn-primary k-event-AddToCart\">\n  Add to Cart\n\u003C\u002Fbutton>\n\n\u003C!-- Track 'Contact' event when WhatsApp link is clicked -->\n\u003Ca href=\"https:\u002F\u002Fwa.me\u002F62812345678\" class=\"k-event-Contact\">\n  Contact Us\n\u003C\u002Fa>\n","html","",[37,166,167,176,206,213,223,230,236,268,274],{"__ignoreMap":164},[168,169,172],"span",{"class":170,"line":171},"line",1,[168,173,175],{"class":174},"sHwdD","\u003C!-- Track 'AddToCart' event when button is clicked -->\n",[168,177,179,183,187,191,194,197,201,203],{"class":170,"line":178},2,[168,180,182],{"class":181},"sMK4o","\u003C",[168,184,186],{"class":185},"swJcz","button",[168,188,190],{"class":189},"spNyl"," class",[168,192,193],{"class":181},"=",[168,195,196],{"class":181},"\"",[168,198,200],{"class":199},"sfazB","btn btn-primary k-event-AddToCart",[168,202,196],{"class":181},[168,204,205],{"class":181},">\n",[168,207,209],{"class":170,"line":208},3,[168,210,212],{"class":211},"sTEyZ","  Add to Cart\n",[168,214,216,219,221],{"class":170,"line":215},4,[168,217,218],{"class":181},"\u003C\u002F",[168,220,186],{"class":185},[168,222,205],{"class":181},[168,224,226],{"class":170,"line":225},5,[168,227,229],{"emptyLinePlaceholder":228},true,"\n",[168,231,233],{"class":170,"line":232},6,[168,234,235],{"class":174},"\u003C!-- Track 'Contact' event when WhatsApp link is clicked -->\n",[168,237,239,241,244,247,249,251,254,256,258,260,262,264,266],{"class":170,"line":238},7,[168,240,182],{"class":181},[168,242,243],{"class":185},"a",[168,245,246],{"class":189}," href",[168,248,193],{"class":181},[168,250,196],{"class":181},[168,252,253],{"class":199},"https:\u002F\u002Fwa.me\u002F62812345678",[168,255,196],{"class":181},[168,257,190],{"class":189},[168,259,193],{"class":181},[168,261,196],{"class":181},[168,263,150],{"class":199},[168,265,196],{"class":181},[168,267,205],{"class":181},[168,269,271],{"class":170,"line":270},8,[168,272,273],{"class":211},"  Contact Us\n",[168,275,277,279,281],{"class":170,"line":276},9,[168,278,218],{"class":181},[168,280,243],{"class":185},[168,282,205],{"class":181},[24,284,286],{"id":285},"_2-track-form-submissions","2. Track Form Submissions",[15,288,289,290,293],{},"Add the class to the ",[37,291,292],{},"\u003Cform>"," element. Konektor will automatically track when the form is successfully submitted.",[15,295,296,299],{},[32,297,298],{},"Smart Identification Feature",":\nWhen a form with a tracking class is submitted, Konektor automatically detects and captures data:",[46,301,302,319,339],{},[49,303,304,307,308,311,312,311,315,318],{},[32,305,306],{},"Email"," (from inputs named ",[37,309,310],{},"email",", ",[37,313,314],{},"mail",[37,316,317],{},"surel",")",[49,320,321,307,324,311,327,311,330,311,333,311,336,318],{},[32,322,323],{},"Phone",[37,325,326],{},"phone",[37,328,329],{},"tel",[37,331,332],{},"mobile",[37,334,335],{},"wa",[37,337,338],{},"hp",[49,340,341,307,344,311,347,311,350,318],{},[32,342,343],{},"Name",[37,345,346],{},"name",[37,348,349],{},"fullname",[37,351,352],{},"nama",[15,354,355],{},"This ensures your Lead data is captured completely without additional coding.",[159,357,359],{"className":161,"code":358,"language":163,"meta":164,"style":164},"\u003C!-- Track 'Lead' event & auto-capture email\u002Fname data -->\n\u003Cform class=\"k-event-Lead\" action=\"\u002Fthank-you\">\n  \u003Cinput type=\"text\" name=\"nama\" placeholder=\"Full Name\">\n  \u003Cinput type=\"email\" name=\"email\" placeholder=\"Email Address\">\n  \u003Cbutton type=\"submit\">Sign Up Now\u003C\u002Fbutton>\n\u003C\u002Fform>\n",[37,360,361,366,397,442,481,510],{"__ignoreMap":164},[168,362,363],{"class":170,"line":171},[168,364,365],{"class":174},"\u003C!-- Track 'Lead' event & auto-capture email\u002Fname data -->\n",[168,367,368,370,373,375,377,379,381,383,386,388,390,393,395],{"class":170,"line":178},[168,369,182],{"class":181},[168,371,372],{"class":185},"form",[168,374,190],{"class":189},[168,376,193],{"class":181},[168,378,196],{"class":181},[168,380,145],{"class":199},[168,382,196],{"class":181},[168,384,385],{"class":189}," action",[168,387,193],{"class":181},[168,389,196],{"class":181},[168,391,392],{"class":199},"\u002Fthank-you",[168,394,196],{"class":181},[168,396,205],{"class":181},[168,398,399,402,405,408,410,412,415,417,420,422,424,426,428,431,433,435,438,440],{"class":170,"line":208},[168,400,401],{"class":181},"  \u003C",[168,403,404],{"class":185},"input",[168,406,407],{"class":189}," type",[168,409,193],{"class":181},[168,411,196],{"class":181},[168,413,414],{"class":199},"text",[168,416,196],{"class":181},[168,418,419],{"class":189}," name",[168,421,193],{"class":181},[168,423,196],{"class":181},[168,425,352],{"class":199},[168,427,196],{"class":181},[168,429,430],{"class":189}," placeholder",[168,432,193],{"class":181},[168,434,196],{"class":181},[168,436,437],{"class":199},"Full Name",[168,439,196],{"class":181},[168,441,205],{"class":181},[168,443,444,446,448,450,452,454,456,458,460,462,464,466,468,470,472,474,477,479],{"class":170,"line":215},[168,445,401],{"class":181},[168,447,404],{"class":185},[168,449,407],{"class":189},[168,451,193],{"class":181},[168,453,196],{"class":181},[168,455,310],{"class":199},[168,457,196],{"class":181},[168,459,419],{"class":189},[168,461,193],{"class":181},[168,463,196],{"class":181},[168,465,310],{"class":199},[168,467,196],{"class":181},[168,469,430],{"class":189},[168,471,193],{"class":181},[168,473,196],{"class":181},[168,475,476],{"class":199},"Email Address",[168,478,196],{"class":181},[168,480,205],{"class":181},[168,482,483,485,487,489,491,493,496,498,501,504,506,508],{"class":170,"line":225},[168,484,401],{"class":181},[168,486,186],{"class":185},[168,488,407],{"class":189},[168,490,193],{"class":181},[168,492,196],{"class":181},[168,494,495],{"class":199},"submit",[168,497,196],{"class":181},[168,499,500],{"class":181},">",[168,502,503],{"class":211},"Sign Up Now",[168,505,218],{"class":181},[168,507,186],{"class":185},[168,509,205],{"class":181},[168,511,512,514,516],{"class":170,"line":232},[168,513,218],{"class":181},[168,515,372],{"class":185},[168,517,205],{"class":181},[24,519,521],{"id":520},"_3-track-specific-pages-page-load","3. Track Specific Pages (Page Load)",[15,523,524,525,528],{},"If you want to trigger a custom event when a specific page is opened (e.g., a \"Thank You\" page), add the class to the ",[37,526,527],{},"\u003Cbody>"," tag.",[159,530,532],{"className":161,"code":531,"language":163,"meta":164,"style":164},"\u003Cbody class=\"k-event-Purchase\">\n  \u003C!-- Page content -->\n\u003C\u002Fbody>\n",[37,533,534,554,559],{"__ignoreMap":164},[168,535,536,538,541,543,545,547,550,552],{"class":170,"line":171},[168,537,182],{"class":181},[168,539,540],{"class":185},"body",[168,542,190],{"class":189},[168,544,193],{"class":181},[168,546,196],{"class":181},[168,548,549],{"class":199},"k-event-Purchase",[168,551,196],{"class":181},[168,553,205],{"class":181},[168,555,556],{"class":170,"line":178},[168,557,558],{"class":174},"  \u003C!-- Page content -->\n",[168,560,561,563,565],{"class":170,"line":208},[168,562,218],{"class":181},[168,564,540],{"class":185},[168,566,205],{"class":181},[568,569],"hr",{},[19,571,573],{"id":572},"method-2-data-attributes-advanced","Method 2: Data Attributes (Advanced)",[15,575,576],{},"Use this method if you need more detailed control or want to include dynamic data (like product price, transaction ID, etc.).",[24,578,580],{"id":579},"available-attributes","Available Attributes",[46,582,583,589],{},[49,584,585,588],{},[37,586,587],{},"data-k-event",": Event name (required).",[49,590,591,594],{},[37,592,593],{},"data-k-props",": JSON object containing additional properties (optional).",[24,596,598],{"id":597},"implementation-examples","Implementation Examples",[600,601,603],"h4",{"id":602},"track-purchase-with-value","Track Purchase with Value",[159,605,607],{"className":161,"code":606,"language":163,"meta":164,"style":164},"\u003Cbutton\n  id=\"checkout-btn\"\n  data-k-event=\"Purchase\"\n  data-k-props='{\"value\": 150000, \"currency\": \"IDR\", \"order_id\": \"ORD-123\"}'>\n  Pay Now\n\u003C\u002Fbutton>\n",[37,608,609,616,631,645,662,667],{"__ignoreMap":164},[168,610,611,613],{"class":170,"line":171},[168,612,182],{"class":181},[168,614,615],{"class":185},"button\n",[168,617,618,621,623,625,628],{"class":170,"line":178},[168,619,620],{"class":189},"  id",[168,622,193],{"class":181},[168,624,196],{"class":181},[168,626,627],{"class":199},"checkout-btn",[168,629,630],{"class":181},"\"\n",[168,632,633,636,638,640,643],{"class":170,"line":208},[168,634,635],{"class":189},"  data-k-event",[168,637,193],{"class":181},[168,639,196],{"class":181},[168,641,642],{"class":199},"Purchase",[168,644,630],{"class":181},[168,646,647,650,652,655,658,660],{"class":170,"line":215},[168,648,649],{"class":189},"  data-k-props",[168,651,193],{"class":181},[168,653,654],{"class":181},"'",[168,656,657],{"class":199},"{\"value\": 150000, \"currency\": \"IDR\", \"order_id\": \"ORD-123\"}",[168,659,654],{"class":181},[168,661,205],{"class":181},[168,663,664],{"class":170,"line":225},[168,665,666],{"class":211},"  Pay Now\n",[168,668,669,671,673],{"class":170,"line":232},[168,670,218],{"class":181},[168,672,186],{"class":185},[168,674,205],{"class":181},[600,676,678],{"id":677},"dynamic-links","Dynamic Links",[159,680,682],{"className":161,"code":681,"language":163,"meta":164,"style":164},"\u003Ca href=\"\u002Fpromo\"\n   data-k-event=\"ViewContent\"\n   data-k-props='{\"content_name\": \"Holiday Promo Bundle\", \"content_id\": \"PROMO-01\"}'>\n   View Promo\n\u003C\u002Fa>\n",[37,683,684,701,714,730,735],{"__ignoreMap":164},[168,685,686,688,690,692,694,696,699],{"class":170,"line":171},[168,687,182],{"class":181},[168,689,243],{"class":185},[168,691,246],{"class":189},[168,693,193],{"class":181},[168,695,196],{"class":181},[168,697,698],{"class":199},"\u002Fpromo",[168,700,630],{"class":181},[168,702,703,706,708,710,712],{"class":170,"line":178},[168,704,705],{"class":189},"   data-k-event",[168,707,193],{"class":181},[168,709,196],{"class":181},[168,711,57],{"class":199},[168,713,630],{"class":181},[168,715,716,719,721,723,726,728],{"class":170,"line":208},[168,717,718],{"class":189},"   data-k-props",[168,720,193],{"class":181},[168,722,654],{"class":181},[168,724,725],{"class":199},"{\"content_name\": \"Holiday Promo Bundle\", \"content_id\": \"PROMO-01\"}",[168,727,654],{"class":181},[168,729,205],{"class":181},[168,731,732],{"class":170,"line":215},[168,733,734],{"class":211},"   View Promo\n",[168,736,737,739,741],{"class":170,"line":225},[168,738,218],{"class":181},[168,740,243],{"class":185},[168,742,205],{"class":181},[744,745,747],"warning",{"title":746},"Important",[15,748,749,750,752,753,755,756,758],{},"Ensure the JSON format inside ",[37,751,593],{}," is valid. Use double quotes (",[37,754,196],{},") for keys and string values, and wrap the entire JSON object in single quotes (",[37,757,654],{},").",[568,760],{},[19,762,764],{"id":763},"other-automatic-features","Other Automatic Features",[15,766,767],{},"Konektor has several \"magic\" features running in the background to assist your tracking.",[24,769,771],{"id":770},"_1-whatsapp-link-decoration","1. WhatsApp Link Decoration",[15,773,774,775,778,779,782,783,786],{},"The Konektor script automatically detects links to WhatsApp (",[37,776,777],{},"wa.me"," or ",[37,780,781],{},"whatsapp.com",") and appends a unique ",[32,784,785],{},"Visitor Code"," to the preset text message.",[15,788,789],{},[32,790,791],{},"Illustration:",[46,793,794,800],{},[49,795,796,797],{},"Original Link: ",[37,798,799],{},"https:\u002F\u002Fwa.me\u002F6281...?text=Hello",[49,801,802,803],{},"Link after user click: ",[37,804,805],{},"https:\u002F\u002Fwa.me\u002F6281...?text=Hello [K-X7Y9Z]",[15,807,808,809,812],{},"This ",[37,810,811],{},"[K-X7Y9Z]"," code allows your CS team to identify the user in the Konektor dashboard.",[24,814,816],{"id":815},"_2-auto-link-decoration-cross-domain","2. Auto Link Decoration (Cross-Domain)",[15,818,819,820,311,823,311,826,829],{},"If you link to another domain that also uses Konektor (or registered custom domains), the script automatically appends parameters like ",[37,821,822],{},"visitor_code",[37,824,825],{},"gclid",[37,827,828],{},"fbclid",", etc., to the destination URL. This keeps the user session connected across domains.",[568,831],{},[19,833,835],{"id":834},"troubleshooting","Troubleshooting",[24,837,839],{"id":838},"event-not-appearing-in-dashboard","Event Not Appearing in Dashboard?",[841,842,843,849,859,876],"ol",{},[49,844,845,848],{},[32,846,847],{},"Check Internet Connection",": Ensure no adblocker is blocking the Konektor script.",[49,850,851,854,855,858],{},[32,852,853],{},"Inspect Element",": Use \"Inspect\" in your browser, look at the \"Network\" tab, and filter by \"konektor\". Check if there is a request to ",[37,856,857],{},"v1\u002Ftrack"," when the button is clicked.",[49,860,861,864,865,868,869,872,873,758],{},[32,862,863],{},"Check Class Naming",": Ensure the prefix is ",[37,866,867],{},"k-event-"," (case-sensitive according to the event, but usually the script handles this). It is recommended to use standard CamelCase events (e.g., ",[37,870,871],{},"AddToCart",", not ",[37,874,875],{},"addtocart",[49,877,878,881],{},[32,879,880],{},"Validate JSON",": If using Data Attributes, ensure the JSON is valid.",[24,883,885],{"id":884},"testing-tips","Testing Tips",[15,887,888,889,892,893,896],{},"Use ",[37,890,891],{},"console.log"," in your browser to debug manually if needed, or check the ",[32,894,895],{},"Conversions > Sync Logs"," tab in the Konektor dashboard to see incoming events.",[898,899,900],"style",{},"html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":164,"searchDepth":178,"depth":178,"links":902},[903,907,913,917,921],{"id":21,"depth":178,"text":22,"children":904},[905,906],{"id":26,"depth":208,"text":27},{"id":77,"depth":208,"text":78},{"id":116,"depth":178,"text":117,"children":908},[909,910,911,912],{"id":123,"depth":208,"text":124},{"id":153,"depth":208,"text":154},{"id":285,"depth":208,"text":286},{"id":520,"depth":208,"text":521},{"id":572,"depth":178,"text":573,"children":914},[915,916],{"id":579,"depth":208,"text":580},{"id":597,"depth":208,"text":598},{"id":763,"depth":178,"text":764,"children":918},[919,920],{"id":770,"depth":208,"text":771},{"id":815,"depth":208,"text":816},{"id":834,"depth":178,"text":835,"children":922},[923,924],{"id":838,"depth":208,"text":839},{"id":884,"depth":208,"text":885},"implementation",null,"Learn how to track custom events like button clicks, forms, and WhatsApp links using CSS Classes or Data Attributes without complex coding.","md",{},"\u002Fen\u002Fdocs\u002Fcustom-tracking",{"keywords":932,"canonical":938,"title":5,"description":927},[933,934,935,936,937],"custom tracking konektor","custom events","css class tracking","data attribute tracking","form tracking","\u002Fdocs\u002Fcustom-tracking",{"loc":930,"lastmod":940},"2026-01-24","en\u002Fdocs\u002Fcustom-tracking",[934,943,944,945,937],"tracking","css classes","data attributes","N70PUYpbxbyTSXYa6iQp-4JGVje312gGNxtkPEdrc4w"]