I am trying to create an event-based rule on Adobe DTM so that an event is recorded anytime a menu li class changes from "item" to "item-active". The report should return the data-reference or data-index value of the item-active li.
<div class="menu">
<ul class="list">
<li class="item" data-reference="#chapter1" data-index="1">
<div class="number">1</div></li>
<li class="item-active" data-reference="#chapter2" data-index="2">
<div class="number">2</div></li>
<li class="item" data-reference="#chapter3" data-index="3">
<div class="number">3</div></li>
</ul>
The menu is for a long-form article and the class changes to item-active when a user scrolls down to the specified chapter. How would I go about creating an event-based rule based on the above information?
Thanks
Adobe recently added a condition to event-based rules called "data element changed"
This condition will continuously "listen" for changes to a specified data element value and send analytics any time a value change is detected.
While most often discussed in connection with the AEM Context Tool, you should be able to leverage this "listener" if you can update a data element any time the class value changes (link click, URL hashtag, etc.).
you could use the the event type "pushState or haschange" to check if the hash in the URL has changed, because you work with jump marks.
Or you can use the event type "enters viewtype" if your chapters have different id in the headline/div-tags.
Kind regards
Till
Related
I'm trying to track all outbound links that contains the target=_blank, and after many hours of testing I realized that each click variables (in the debug mode) seems to be empty. I guess this is because there's a span element within the anchor. On some clicks the variables contain the full URL and attributes etc, but most of the time they don't - and there doesn't seem to be any constistency in this behavior.
Does anyone have any idea what's wrong here? Thanks!
DOM for the link:
<div class="elementor-button-wrapper">
<a href="#" class="elementor-button-link elementor-button elementor-size-sm" target="_blank" role="button">
<span class="elementor-button-content-wrapper">
<span class="elementor-button-text">Se priset</span>
</span>
</a>
</div>
The problem is, that you are using click trigger for all elements, which captures the exact element clicked, which is the span.elementor-button-text
You should use just "Click - Just links" type of trigger, and specify the links you would like to track. This will ensure, that the clicked element is the a tag, regardless of its child elements, that can get clicked.
You can set your trigger to capture only links with target=_blank attribute as {{Click Element}} matches CSS selector a[target="_blank"]
E.g.
EDIT:
Based on your relevant code part, the Link Click event should look like this:
Using the source code below, I need to track text values of clicked links.
How can I track this and whether page load rule or event based rule is beneficiary for it?
How to code this using dtm?
<div class="afgfj">
<section class="asked-questions">
<div class="g-bp-row-gutter p-comp-spacinottom p-rb">
<h2 class="p-heading-02 p-component-title">
Frequently Asked Questions
</h2>
<dl class="p-faq-main p-accordion"
data-ctn="S9031/26">
<dt class="p-top-10 p-faq-chapter p-active">
<span class="p-top-10-global">Top-10 FAQs</span>
<span class="p-top-10-local">Top 10 FAQs</span>
</dt>
<dd class="p-top-10 p-faq-list p-active">
<ul class="p-bullets">
<li class="p-faq-item" data-lang="ENG">
<div class="p-magnific-popup-launcher" data-comp-id="magnificPopupLauncher"
data-type="iframe"
data-title="Frequently asked questions"
data-close-label="Back"
data-href="//www.org.com/cgi-bin/oleeview?view=aa12_view_body.html&dct=QAD&refnr=0073544&slg=ENG&scy=GB&ctn=S9031/26">
How long does it take to get?
</div>
</li>
<li class="p-faq-item" data-lang="ENG">
<div class="p-magnific-popup-launcher" data-comp-id="magnificPopupLauncher"
data-type="iframe"
data-title="Frequently asked questions"
data-close-label="Back"
data-href="//www.org.com/cgi-bin/oleeview?view=aa12_view_body.html&dct=QAD&refnr=0020591&slg=ENG&scy=GB&ctn=S9031/26">
Can I recharge the appliance?
</div>
</li>
This is a perfect time to use an Event Based Rule. You'll also need to create a data element to hold the text value.
The main obstacle that I can see from your code would be identifying the A tag correctly.
First the Data Element: in DTM Rules, within Data Elements click Create New Data Element.
Enter a name, specify the type (CSS Selector seems the most appropriate here) then within the CSS Selector Chain list state how to reach it. My guess is for your code it would be "div.p-magnific-popup-launcher a" but you would need to test this. You can tell by opening a Inspect Element (F12) in Chrome or similar debugging gadget. There's a good blog about doing this from Adobe here.
You should also specify which part of the A tag to save. From your question you I believe you need 'text' which would capture items like "How long does it take to get?"
Under Event Based Rules within DTM click Create New Rule.
When you're happy with the settings on this page click Save Data Element.
Populate your name, and category if applicable. The Event Type should already be set to 'click'.
Within Tag you then have to set how to find the A tag through CSS, similar to above.
That's the basics, but you'll also need to set Criteria (what pages this should fire on). Furthermore, under the Adobe Analytics section you should set whether a pageview is incremented or not, and which eVars, Props and Events are populated as a result of the click. This is also where you can use the value from your Data Element. Under Link Tracking, choose Custom Link. Within Link Name, enter a percent sign (%) and your data elements should appear. Use the name you specified earlier.
Note: you should match up your populated eVars and Events etc. with your settings under Report Suites in the Analytics interface.
I am assuming you are attempting to get the text of an <a> element when it is clicked on.
Such as in the one below, you would want to get "How long does it take to get?":
How long does it take to get?
To do this, create an event based rule with the event type "click", set the element tag to "a". (See image below)
Next you will want to configure the Adobe Analytics section of the rule.
You will set the Tracking to s.tl() ,since you do not want to create a pageview when someone clicks the link (the page they view should already do that).
Then set an eVar and/or Prop to %this.text%. This is DTM notation to grab the text of the element that triggered the rule to fire.
Finally, set an event to trigger on this rule.
See image below for the configuration
This should track when an <a> element is clicked and store the text in an eVar
An app I'm building shows email accounts in a sidenav as a dropdown (or accordion) as described here.
The dropdown works fine when the data exist on load time, thanks to the UIkit observer.
The code looks something like this (simlified):
<div id="app_wrapper" data-uk-observe>
<ul class="uk-nav uk-nav-side uk-nav-parent-icon" data-uk-nav data-uk-observe>
{{#each mailAccounts}}
<li class="uk-parent ct-mail-account-side-nav-entry">
user#domain.tld
<ul class="uk-nav-sub">
<li><i class="uk-icon-inbox"></i> Inbox</li>
<li><i class="uk-icon-folder"></i> Sent</li>
<li><i class="uk-icon-folder"></i> Trash</li>
<li><i class="uk-icon-folder"></i> Spam</li>
</ul>
</li>
<li class="uk-nav-divider"></li>
{{/each}}
</ul>
</div>
When adding new accounts through a meteor method, the entry appears yet the dropdown is stone dead. Only if the template is completely rerendered it comes to life. That usually requires a little detour to some other page where the menu doesn't exist.
How can I make the observer aware of the change?
Why doesn't the observer notice the change and apply it's magic to the newly created entry?
Is there a way to manually assign the JavaScript dropdown magic to the newly created element?
UIkit Version: 2.19.0
Meteor uses ractive variables to modify DOM at runtime. What this means is that your mailAccounts need to be a ractive variable. There are two cheap (in terms of effort) methods to achieve this
Define mailAccounts as a session variable
Have mailAccounts be part of a collection
There is a third way as well, if you don't mind writing some more code. Use ractiveVar package and define mailAccounts as a reactiveVar.
My page has a list of links, with some associated information.
eg. Something along the lines of
<div class="listOfThings">
<div class="Thing"> <a link here/> <specific thing A info here/> </div>
<div class="Thing"> <a link here/> <specific thing B info here/> </div>
<div class="Thing"> <a link here/> <specific thing C info here/> </div>
</div>
In DTM, I want to be able to track a click on to any of those inner "Thing" divs, extract which thing was clicked, and pass that info to Google Analytics. I can get the click selector working fine, but I want to know how to extract the additional information on the click.
This would be done inside of an Event Based rule. See image: http://imgur.com/BQv0HdC
Event Type: Click
In the element tag or selector: div.things a
This is saying I want to track all click on any anchor tag inside a div with the class name of "things"
Then once you have done that you can reference the "this" scope. You have use %% as a notation within the form fields for the GA code. so %this.text% would pull in the text of the specific link selected: %this.innnerHTML%, %this.href% etc...
with Google Tag Manager Auto-Event Tracking (dataLayer.push), I want to track this information:
the name of the links clicked in my menu, for example:
<ul class="my-nav">
<li>
Anoter site
</li>
</ul>
so: 'Another site'
I want to push the name of the parent link name of the clicked link with this structure:
<li>Linkname
<ul>
<li>
Website name
<li>
<ul>
<li>
So there: I want 'Linkname'
the 'status' of a toggle link - whether the element has a class 'open' or not
<a class="content-toggler open" href="#">Hide all the content</a>
I have read through many tutorials and walkthroughs, but most talk about tracking links that go to external sites in general, or submit events and so on.
Here I want to track the name of a link in a certain dom tree.
And I want to track the element 'status' with a certain class.
Please explain how this can be achieved, or refer me to articles that have an example to
this kind of events, not only to general walkthroughs.
Many many thanks!
Let's start with the last one.
1) What you have to do it to create a link click listener (new tag-->tag type-->Link click listener) and run it on all the pages (or only the pages where it is relevant). This will generate an event for GoogleTagManager that you an use in a rule.
2) Create a rule like the following. This will trigger an event that we will do in the next stage
3) Set an event like the following. Note that I added an element id. If you have more than one toggle open link, you need to find a way how to distinguish between them on google analytics. ID could help you. Also note that using gtm you can only use the classes, not one specific class. (as far as I know)
Now let's go back to the first one. You can use the same method used here above, but instead of putting the {{element classes} as the value of the event, you can create a new macro that will employ the inner text of that link (gtm.element.innertext). On how to do it, read here: http://www.swellpath.com/2013/10/google-tag-manager-inspecting-andconfiguring-auto-event-tracking/
For the second one, you need the innertext of a third level parent. I'm not sure how to implement it other than using javascript that will call an event through the data layer.
So I would suggest a solution like the following:
Create an event on GTM that listens to events that are pushed via the data layer.
On how to do this, go to this post: http://moz.com/ugc/tracking-google-analytics-events-with-google-tag-manager
Start with "Tracking Google Analytics Events with GTM: The Second Way" and do steps: 1,2 and 3.
Create javascript code that is executed when the link is clicked. This JS will take the text of that 3rd parent element whenever that link is clicked. Again, I suggest to provide IDs so the task will be easier.
Then, the same JS code should then run this code
dataLayer.push({ 'event':'GAevent', 'eventCategory':'Navigation Clicks', 'eventAction':'Menu Item Click', 'eventLabel':'Outbound Click', 'eventValue:***YOUR 3RD LEVEL PARENT TEXT HERE***});
Then the event with the value is registered via google analytics.
Note that all the names I gave for the event values in my reply are based on my understanding of your needs. You will need to adjust them to what you want to achieve with this event tracking.