• Expand/CollapseMenu
Help
Reply

Is it possible to track drag'n'drop with Tealium

Is it possible to track drag'n'drop with Tealium

‎10-08-2019 07:36 AM

‎10-08-2019 07:36 AM
Bronze Contributor
Bronze Contributor

I want to implement tracking for drag'n'drop function. IS it possible to track via Tealium

1,568 Views
‎10-08-2019 07:36 AM
0 Kudos
Reply
1 REPLY 1

Is it possible to track drag'n'drop with Tealium

Re: Is it possible to track drag'n'drop with Tealium

‎10-11-2019 05:06 AM - edited ‎10-11-2019 10:53 AM

‎10-11-2019 05:06 AM
Tealium Employee

Hi @Ankitajaiswal 

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

 

 

1,533 Views
‎10-11-2019 05:06 AM
0 Kudos
Reply

Copyright All Rights Reserved © 2008-2023

Public