- TLC Home Home
- Discussions Discussions
- Documentation Documentation
- Knowledge Base Knowledge Base
- Education Education
- Blog Blog
- Support Desk Support Desk
10-08-2019 07:36 AM
I want to implement tracking for drag'n'drop function. IS it possible to track via Tealium
Solved! Go to Solution.
10-11-2019 05:06 AM - edited 10-11-2019 10:53 AM
Yes, its possible by adding another binding to the html tag where the draggable will be dropped with out affecting the original functionality.
Here is the binding example:
document.getElementById("div1").addEventListener("drop", function() { console.log("second bind event to track with tealium"); utag.link({ event_name : "icon_drag_and_drop" }, function() { console.log("call was done to tealium and this is the callback!")}, null); }, false);
Here is an example page with some original drag and drop functionality from the "dev team":
<html> <head> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script> function allowDrop(ev) { ev.preventDefault(); console.log("original allowdrop"); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); console.log("original drag"); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.innerHTML = ""; ev.target.appendChild(document.getElementById(data)); console.log("original drop"); } </script> <style> #div1 { width: 350px; height: 70px; padding: 10px; border: 1px solid #aaaaaa; } </style> </head> <body style="background-color: aqua"> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">drag the jquery logo in here and see the tracking in the console</div> <img id="drag1" src="https://jquery.com/jquery-wp-content/themes/jquery/images/logo-jquery.png" draggable="true" ondragstart="drag(event)" width="336" height="69"> </body> </html>
now we add the tealium bits:
<html> <head> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script> function allowDrop(ev) { ev.preventDefault(); console.log("original allowdrop"); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); console.log("original drag"); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.innerHTML = ""; ev.target.appendChild(document.getElementById(data)); console.log("original drop"); } </script> <!-- tealium block /--> <script type="text/javascript"> var utag_data = {}; document.addEventListener("DOMContentLoaded", function(){ document.getElementById("div1").addEventListener("drop", function() { console.log("second bind event to track with tealium"); utag.link({ event_name : "icon_drag_and_drop" }, function() { console.log("call was done to tealium and this is the callback!")}, null); }, false); }); </script> <script src="//tags.tiqcdn.com/utag/services-ruipedrodacruzmachado/as/dev/utag.sync.js"></script> <script src="//tags.tiqcdn.com/utag/services-ruipedrodacruzmachado/as/dev/utag.js" async></script> <!-- end of tealium block /--> <style> #div1 { width: 350px; height: 70px; padding: 10px; border: 1px solid #aaaaaa; } </style> </head> <body style="background-color: aqua"> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">drag the jquery logo in here and see the tracking in the console</div> <img id="drag1" src="https://jquery.com/jquery-wp-content/themes/jquery/images/logo-jquery.png" draggable="true" ondragstart="drag(event)" width="336" height="69"> </body> </html>
See this in action here:
https://solutions.tealium.net/hosted/rmachado/tlc/draganddrop.html
Copyright All Rights Reserved © 2008-2023