How to Track Link clicks via Data Layer

[rajdeep91]

I in a situation where I want to track link clicks using data layers which are getting populated on the fly.

For e.g. 
Here is a link and on click a JS function is getting called which is populating data layer object with link name, link URL information. 

<a id="link1" onclick="Link1DataLayer()" href="http://www.google.co.in">Basic Link Tracking</a></h1>
<script>
function Link1DataLayer()
{
var Link_Data = {
linkName : $("a#link1").text(), 
linkUrl : $("a#link1").attr('href')
}
}
</script>

Data layers is something what developers are going to provide me, information for every interactions link Video name, Image name, Button click name, Carousel swipes etc in form of data layers.
What I want is, on the click of link or button, JQuery handler extension should get fired and I should able to grab the data layer object values and inject into some tealium variables. Hence eventually I will push these tealium variables into GA custom dimension.
I was able to do that using DOM scrapping but not able to do so when I am trying to pull via data layer.

This can be easily accomplished within Adobe Launch and DTM but not able to find a vaiable solution in Tealium. 

[GavinAttard · Accepted solution]

I think ther are two ways to resolve this. 

If your developers are creating a datalayer, i woudl recommend setting this the UDO as per implementaiton guidelines. 

Otherwise, if you can access the vars in the data layer (and you can..) then all you need to do is setup an extention in Teallium to trigger a utag.link whcih will allow you to read or pass those vars again. 

i think... :-) 

[rajdeep91]

@GavinAttard - Thanks for the inputs. First trick worked for me and i think I can go ahead with that in my current project. But I found issues with the second approach. When I tried in following way I was getting error "Uncaught ReferenceError: Link_Data is not defined"

Though such JS object do exist on click and data layer is getting populated on click before this extension. Still Tealium not able to read or fonud this JS object. 
can you please look at it and let me know if I am doing something wrong.

[GavinAttard]

Ah, 

The way to implement 2 is using a Custom JS extention. 

$("[id='some id']").on('submit', function(e) { 
    utag.link ({
        event_name : "some_event",
        another_var : "another value"
    }); 
});

In this example i am waiting for a form submit which will then trigger a utag.link and i can pass whatever vars i need to.