I'm trying to do some tracking on a specific element of a website, without being able to implement a data layer in the code (development budget is limited at the moment). I'm trying to base my trigger on a CSS selector but it's not working so far.
We have three boxes that are located under the add to cart on https://www.sail.ca/en/browning-high-noon-spotlight-modb-197590. We want to know which of these is being clicked the most.
Here is the code for the 3 boxes :
<div class="legal-container">
<div class="sub-container">
<a href="#" data-action="legal-modal" data-component="toggle-modal" data-tab="shipping">
<div class="over-icon"><img src="/skin/frontend/sail/default/nwayo/build/images/common/icon-delivery.svg" alt="Shipping" /></div>
<div class="content">Free shipping on orders over $75</div> </a>
</div>
<div class="sub-container">
<a href="#" data-action="legal-modal" data-component="toggle-modal" data-tab="returns">
<div class="over-icon"><img src="/skin/frontend/sail/default/nwayo/build/images/common/icon-returns.svg" alt="Returns" /></div>
<div class="content">Easy Return</div> </a>
</div>
<div class="sub-container">
<a href="#" data-action="legal-modal" data-component="toggle-modal" data-tab="price_warranty">
<div class="over-icon"><img src="/skin/frontend/sail/default/nwayo/build/images/common/icon-price-warranty.png" alt="Best price" /></div>
<div class="content">Best pricRThe guarantee</div> </a>
</div>
</div>
I have created a Data Layer variable using the name gtm.element.dataset.tab
The trigger matches on "Click Element matches CSS selector [data-tab="price_warranty"]
Do you see what I am doing wrong? This is based on a tutorial posted by Lunametrics some time ago (https://www.lunametrics.com/blog/2017/07/07/tracking-clicks-custom-data-attributes-google-tag-manager-google-analytics/), but there's visibly something I'm missing.
Thank you so much,
Charles
Make sure your click trigger is of the "links only" type. If you have an "click on all elements" then chances are that Click Element is not the element with the attribute, but the image contained within.
This has to do with the way GTM attaches event handlers. GTM does not attach event handlers to elements directly. Instead it attaches event handlers to the document. When an element is clicked the event bubbles up through the DOM until it arrives at the document node. There the target element (Click Element) is inspected if it matches the condition specified in the filter of the click trigger.
If you do a "links only" trigger GTM actually looks at the links only, and since your link has the data attribute that should work for you.
This is a robust way to make sure that events are triggered for dynamically created elements, but it means that it's no always easy to get the desired Click Element.
Related
How to select Actions Button followed by the Div class containing known Text ( for example, card_header-title"Addresses" in this case) in Robot Test Framework?
The page contains several span table sections and each of them has its own actions and show-history buttons. To select the specific Actions button, I could use its xpath, but I am trying to access all sections in a for loop and the xpath of actions button in one section changes from the other, so hard coding is not an option for me. Would someone please help.
<div class="attribute-group-header card__header">
<h3 class="attribute-group-title card__header-title">Addresses</h3>
<div class="floatright">
<input type="button" class="action small btn" value="Actions">
<input type="button" class="showHistory action small btn" value="ShowHistory">
</div>
</div>
I know you say you don't want to use Xpaths but maybe one of these examples could help. I don't see any other way of achieving what you're asking for other than having id's supplied on the buttons.
You could use an xpath locator that first finds the text of the "attribute-group-title card__header-title" element and then selects the following sibling div, followed by the input:
//*[contains(text(),'Addresses')]/following-sibling::div[1]//input[#value='Actions']
I am using a Bootstrap Template, that you can see the live version here - https://02dc74ce3e31e56a52ebcc845dca58e87283aabe.googledrive.com/host/0Bxbofwq0kd4ReUt2YWVOYmt3WVU/
If you view it on a mobile device, you will see how the responsiveness of Bootstrap kicks in.
But when I applied it to my Rails app, the mobile version does not look the same.
Any ideas what may be causing the discrepancy?
You can see the differences especially in both the main 'content' area with the story (notice on my version you see multiple stories in the main view, but on the original you only see 1 story and you can read the content more easily). You can also see it when you press the buttons.
Press the 'blue' button to the right top of the original and you will notice that the sidepanel comes out at the top like it should. But on my version it still comes to the side and everything is small.
What am I missing?
Thanks.
Add this to your application.html.erb:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
You have made too many changes while you are implementing the html in your rails view.
Like original header have following content :
<header class="header">
<hgroup class="pull-left">
<h1 class="site-title">
<a href="index.html" title="Von" rel="home">
<i class="fa fa-lemon-o"></i> Von
</a>
</h1>
</hgroup>
<div class="btn btn-primary pull-right" id="togglesidebar">
<i class="fa fa-bars"></i>
</div>
</header>
But in your view instead of <hgroup class="pull-left"> you have <hgroup class="pull-left col-xs-3 col-sm-3 col-md-3 col-lg-3"> and for <div class="btn btn-primary pull-right" id="togglesidebar"> you have <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 masthead-group-3"> also You added two more element in between these two element that destroyed your all header view.
You haven't used middle section from html design it seems you write your own. In your <header class="entry-header"> You created div instead of image tag. So every thing started distorted here. You include header footer section for each main section. But it's not big issue. Try remove div for confirmed and unconfirmed and use image instead. SO you will have proper view. Also remove row class from view that you added so view look more symmetric.
In your about section. When you try to see on mobile view. width of main container <div style="display: inline-block;" class="col-sm-3 sidebar" id="secondary"> is calculated on the basis of it's child element like <div class="about">. As your child element is form and it's having width less than the width displayed on form so remaining section not having proper background color #1c171e. So try increase width of you form control or <h4>Submit Report</h4> like <h4>Submit Report </h4> (kind of hack)under about section You will get proper view for this also.
Judging by your css file, you have loaded similar css multiple times. Consider the fact that, if everything else suggested by the people above has been corrected, the placement of the css files in the application scss file could overwrite your correct code.
I would also check the viewport meta tag as suggested above
If you try calling the CSS and JS being used as individual standalone files, instead of minified, do you still have this issue? Order of these files will matter too. I've seen lots of quirky issues when one JS gets loaded before another, same goes for CSS.
P.S. I would leave this information as a 'Comment' vs. Answer but I don't have enough stack overflow credit yet to do so ;-)
Make sure that if you have using rails g scaffold that you remove the scaffold.css file.
When I validate this page with the w3c validator, I am told that "the name attribute is obsolete," however, I cannot find an alternative. Every article I can find about linking within a page still seems to specify using the name attribute. And the method that is mentioned on the validator (linking to an "id") doesn't seem to work for me.
Anyone know the correct alternative, or how to correctly link to an id?
Also, I'd like to be able to link to a specific point just above where the anchor points currently are...is there any way to be more specific about where the page scrolls/jumps to?
http://firewalkcreative.com/2012/2012.html
You can skip to any element with specified identifier like that:
<div id="navigation"></div>
<div id="content"></div>
<div id="footer"></div>
Skip to navigation
you can use a class name or an id:
<a id="top"></a>
<a class="top"></a>
or you can assign multiple class to make it more specific
<a class="link top"></a>
or with html5 you can do this:
<a data-name="top" ></a>
in the old days, speek html 4, you could to internal links like:
link
and the target would be
<a name="bottom"></a>
Now this days we do it like that:
link
target:
<foo id="bottom"></foo>
You see i use foo, because it can be whatever element you like
I'm using jQuery Mobile (jQM) and Knockout.js (ko) to develop an application. In this application, I need to generate a variable number of buttons that are defined by a constantly updating web service.
So, in my markup, I have:
<div id="answerPage-buttons" data-bind="foreach: buttonsLabels">
<button data-role="button" data-inline="true" data-theme="b" data-bind="text: text, click: $root.submitAnswer" />
</div>
buttonLabels is a list of short strings returned from the web service. It's defined as:
self.buttonLabels = ko.observableArray();
This all works fine when the buttons are not "jQM styled". However, when I style them using:
$("#answerPage-buttons").trigger("create");
problems arise during the update.
The issue seems to be that jQM wraps the buttons in a div (with a sibling span) to make them all nice and mobile looking. However, when the ko applies the updates via the bindings, it only removes the tags, leaving the surrounding stuff, and adds new button tags - which are then also styled by the jQM trigger call.
So, I end up with an ever-growing list of buttons - with only the last set being operational (as the previous ones are gutted by the removal of their button element, but all the styling remains).
I've managed to address this, I think, by placing the following call immediately after the observable is updated:
$("#answerPage-buttons div.ui-btn").remove();
However, my feeling is that there's probably a better approach. Is there?
I found a solution.
If I surround the buttons with a div, it seems to work - e.g.
<div id="answerPage-buttons" data-bind="foreach: buttonsLabels">
<div>
<button data-role="button" data-inline="true" data-theme="b" data-bind="text: text, click: $root.submitAnswer" />
</div>
</div>
I'm guessing this is because the markup added by jQM remains "inside" the markup replicated by ko. Without the div, jQM wraps the button tag, which was the immediate child of the tag that contains the ko foreach binding.
I have a CSS class called selected which highlights the DIV as the current step. When they're all in separate pages, I just had to move the selected word to the next DIV.
But how can I achieve the same in Master Page VB .Net? It seems to be one page for all. When the next page loads, how do I get it to highlight the next step? Thank you.
<div id="Div1">
<div class="step selected" id="Div2">
<h2>
Join</h2>
<img src="./assets/images/signup_arrow.png" class="selected">
</div>
<div class="step" id="Div3">
<h2>
Choose</h2>
</div>
<div class="step" id="Div4">
<h2>
INVITE</h2>
</div>
</div>
If you want to change the value of these controls programatically, you have to make them available server-side via the runat="server" attribute. Once you do that you can get a handle to the controls, either directly in the MasterPage or indirectly on constituent Controls or the Page itself via FindControl("Div2"), which will return an HtmlGeneric control that represents the div. With that you can then use it's Attributes collection to change the class (controls under System.Web.UI.HtmlControls.* lack the direct CssClass property that WebControls have).
There are client-side options as well.