How to track the click button through Launch data element and pass attribute value to Adobe Analytics? | Community
Skip to main content
I
in_kook65578246
Level 2
November 7, 2018
Solved

How to track the click button through Launch data element and pass attribute value to Adobe Analytics?

  • November 7, 2018
  • 5 replies
  • 25592 views

Hi,

I have created several same buttons on a page (same cssClass, different attribute). I create an event rule using the css selector. What I want to do is track which one the customer click and then set its value as an eVar or Props.  I know I can create event rule for each of them but it is stupid.

I find an answer for dtm and try to imitate it. However in Launch, the keyword "this" point to a null object in Launch.

Any solution to this problem?

Thanks!

How to track the click url through data element and pass to Adobe Analytics?

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
    Best answer by Stewart_Schilling

    Try referencing event.element

    In the example below, I have a click event rule for any span tag.  When I click the span, I can access the HTML custom attribute on it as event.element.getAttribute("data-ui-id")

    5 replies

    Stewart_Schilling
    Community Advisor
    Stewart_SchillingCommunity AdvisorAccepted solution
    Community Advisor
    November 7, 2018

    Try referencing event.element

    In the example below, I have a click event rule for any span tag.  When I click the span, I can access the HTML custom attribute on it as event.element.getAttribute("data-ui-id")

      J
      jewilliams
      Level 2
      December 2, 2021

      I'd like to use this method on a rule. What would be the best way to set this event element attribute as an eVar? Would I need to use a custom code?

       

      @stewart_schilling 

      T
      thomas_amsler
      Level 6
      November 8, 2018

      Is this code snipped from a Data Element? There it won't work as they are processed a bit differently, but in the Custom Code of Set Variable "this" is available. If you want to use it in the Set Variable gui, event.element should also be available within the %% just like a Data Element

      If it is a link you also have access to the link object throgh: s.linkObject

      E
      eham1906
      Level 3
      July 23, 2019

      I have a similar problem.

      How would I configure Adobe Launch to capture the value in cst-text from my example below?

      Thank you...

      keithb81089125
      keithb81089125
      Level 2
      July 15, 2020
      why would you want to grab that value? the text is not contextual!
      T
      thomas_amsler
      Level 6
      July 24, 2019

      I can try to outline how I would do it with a custom script, though I have to say, custom attributes are not recommended, you should either use the "data-" prefix or introduce a separate namespace with a linked DTD.

      So I assume you have a rule that get's triggered when this button is clicked.

      In the "Set Variables" action within the custom code you can access this button "event.target". From this you can access the attribute by name "event.target.getAttribute('cst-text')" and apply it to an eVar or prop.

      I am not sure if you could create a data element with script code that can access the element that triggered the rule.

      keithb81089125
      keithb81089125
      Level 2
      July 15, 2020

      This is my working solution, I hope it will help solve your problem.

      Step 1

      Come up with Custom HTML attributes that are unique and won't conflict with your web environment, the example below:

       'data-pagequicklinktype' && 'data-pagequicklinkname'

      I will use the above custom attributes on my HTML elements where I want to capture link clicks or button clicks (text value)

      for example, if I have

      <button href="example.com" data-pagequicklinktype ="button content links"  data-pagequicklinkname = "Explore Our Products | Button Click">Explore Our Products </button>
      As you can see I came up with a proper naming convention, adhering to best practices when it comes to implementation.

      Step 2

      Create your Event Based rule.

      Let us break down the rule components starting with our event type [Core-Click]

      On the core-click, you will notice that I chose to use the "specific elements" option and in the input field, I listed my expected elements separated by a comma: div, button, span, a and these are common HTML elements involved or associated with links and buttons.
      I also selected "and having certain property values", now this is where our Custom Attributes come to play!
      in this case,       I will select the 

      data-pagequicklinktype and use regular expression and then again I add the expected values [^(main|link|footer|button|form)] 

      Remember to always set the expected values and also use those values on different properties you want to track the click event on!

       

      Now On Custom Code

      Please read the comments on the code!

      /*create new variables that will hold the values that you will fetch from your custom **attributes using "this.getAttribute" and specify the attribute name. ".toLowerCase" is **optional */ var elDataId = this.getAttribute('data-pagequicklinktype').toLowerCase(); var elDataText = this.getAttribute('data-pagequicklinkname').toLowerCase(); /* you can create and set a customLink data element variable that holds your values, *optional ** */ _satellite.setVar('customLink', + ' | ' + elDataText); _satellite.logger.log(_satellite.getVar('customLink')); return true;

       
      On the Adobe Analytics - Set Variables 
      Set all your preferred variables, including the customLink  variable we set in the code which is grabbing the value of the clicks

       

      Send your beacons and you are done!

      Please let me know if this works for you, if you require additional assistance, I will be more than happy to help. 
      Let us connect on LinkedIn here Keith - LinkedIn

        J
        jewilliams
        Level 2
        December 2, 2021

        @keithb81089125 I could use help on setting the custom code to assign the descriptor to my eVar. We are adding a particular descriptor in the class for a button so I'm thinking I could put in the custom code

         

        var eVar26 = this.getAttribute('class')

         

        Then in AA Set Variables would I put my eVar26 Set as eVar26?

        Terms & ConditionsAccessibility statement

        Loading footer...