how to track the social media icons using DTM (Dynamic tag manager)?

[vidyar30267388]

I have the below code in my web site.

<div id="atstbx">

    <a class="at-share-btn at-svc-facebook"><span class="at4-icon aticon-facebook" title="Facebook"></span></a>
    <a class="at-share-btn at-svc-twitter"><span class="at4-icon aticon-twitter" title="Twitter"></span></a>
    <a class="at-share-btn at-svc-linkedin"><span class="at4-icon aticon-linkedin" title="LinkedIn"></span></a>
    <a class="at-share-btn at-svc-google_plusone_share"><span class="at4-icon aticon-google_plusone_share" title="Google+"></span></a>
    <a class="at-share-btn at-svc-email"><span class="at4-icon aticon-email" title="Email"></span></a>
</div>

I want to track each anchor tag using DTM. I know how to track single element. Since here we have a bunch of different elements, can anyone help how to track them using DTM? I don't want to create separate rule for each element. In a single rule how can we track these elements.

[Rahsing]

Hi Vidya,

I'm not sure if this will work but you could try it.

1. Create an event based rule for these tags (I'm guessing your event would be a click event)

2. Set the tag as div

3. Check the 'manually assign properties & attributes'

4. Add each of your anchor tags

Please let me know if this works for you.

Kind Regards

Rahul

[vidyar30267388]

I thought about this solution. But the issue will be if we check manually assign properties & attributes we can add all the class that we want to track. How will i change the evars and props with the different values for different anchor tags?

[Rahsing]

My apologies. 

I assumed that you're tracking each of these elements in a single variable.

However, if you're using different evars I don't really know of any way except creating separate rules for each.

There MAY be a way to implement this by writing some custom code but I don't really know what that code would need to be.

I'll let you know if I come across something.

Regards

Rahul

[vidyar30267388]

Yes, i am tracking each of these elements in a single variable. But the values will be different. For ex. for the 1st link facebook it should fire evar12="facebook".then for twitter evar12="twitter". How will i do this custom implementation? By checking the manually assign properties & attributes we can just select the class that we need, to pass the values as per the class what should i use?

I guess we should use Custom box for this. How should we write the function in the custom?

[Rahsing]

Let me try to find out and get back to you.

Regards

Rahul

[Rahsing]

Hi Vidya,

Here's how you could try implementing this. (You don't need to go by the method I'd mentioned earlier wherein each tag is individually specified)

1. Create an event based rule for the click

2. try to put in condition "div#atstbx a span" or "div#atstbx a" so each time there will be a click on either the span or the link then the rule will be fired

3. In the variable you're populating (evar12), set the value as %this.title% 

Since you've set the title of each tag to refer to the platform, the relevant value should get passed into your variable.

Also, have a look at this blog post. It may help you.

Let me know if you have further questions

Kind Regards

Rahul

[vidyar30267388]

Thanks for this solution. Even the blog is helpful. 

I need help in testing the variables that are fired. With the FF and Chrome plugin we can test if the variables are firing. How will i test the value of the variable without going to Adobe test suite. Do we have any tool or plugin for that?

[Rahsing · Accepted solution]

The debugger plugin - as you mentioned - will only test if the rule is firing or not. 

To check the values, you would need to go into your report suite.

I doubt if there are any tools that would allow you to check the value being passed.

I'd suggest omnibug but I don't think it works when you use DTM but you could try it nonetheless.

Rahul

[vidyar30267388]

awesome!!! omnibug is working as expected. Thanks a lot. That was great help.

[Rahsing]

Oh that's great.

Thanks for letting me know that omnibug works. That helps me too.

Kind Regards

Rahul