I am new to GTM and am creating a trigger on a site for my company. I have tried all the ways I know how and looked at Simo Ahava's blog and cannot get my trigger to fire. I am making a trigger that fires on element click and wants to have the Click Element match the CSS selector but cannot get it to work properly.
This is what I see when I inspect the component on the page:
<div _ngcontent-my-app-c1="" class="page-complementary jss-page-complementary" id="jss-page-complementary" name="jss-page-complementary" sc-placeholder="">
<!---->
<!---->
<app-tab-stories _nghost-my-app-c26="" _ngcontent-my-app-c1="" class="ng-star-inserted">
<!---->
<div _ngcontent-my-app-c26="" id="our-stories" class="tab-stories tab-stories--option-three">
<div _ngcontent-my-app-c26="" class="tab-stories__inner">
<div _ngcontent-my-app-c26="" class="tab-stories__header">
<h2 _ngcontent-my-app-c26="" class="tab-stories__heading">Our Stories</h2></div><div _ngcontent-my-app-c26="" class="tab-stories__wrapper">
<mat-tab-group _ngcontent-my-app-c26="" class="tab-stories__tabs mat-tab-group mat-primary ng-animate-disabled mat-tab-group-dynamic-height" disableripple="" dynamicheight="">
<img _ngcontent-my-app-c9="" class="ng-tns-c9-25 tab-stories__image ng-trigger ng-trigger-fadeIn ng-star-inserted" id="app-deferred-image_id_d1e0186a-6714-c0b4-649e-b9234689c136" alt="null" src="/-/media/images/images-sc9/locations/pch/general-pch/patient-stories/lexie-gardiner-square.ashx?&mw=400" style="">
I have tried the following CSS Selectors with no success, any help would be appreciated. The goal is to track that whenever anyone clicks on one of the stories under "Our Stories" they do not link off to anywhere just hidden content.
.tab-stories
.tab-stories__wraper
.tab-stories__image
div#our-stories
.tab-stories*
div#tab-stories*
div#tab-stories
Try .tab-stories__tabs
If it doesn't work, edit your question and add a complete set of html with closing tags so that we could actually inject it into a page and see how it looks.
You don't need to try your selectors in GTM every time. That takes too long.
Just do the following:
Inspect your element to open the Elements tab in the Chrome Debugger.
press ctrl+f while the Elements tab is being focused and start typing your CSS selectors.
The search in the Elements tab is smart enough to not only match literal matches, but CSS selectors matches too.
Debugging your selectors through the Elements tab is the best way to make sure nothing else would trigger your rule on this page and to see what exactly will trigger it.
Related
Struggling with the DOM visible/element variables. Below is the code on page:
Below is the code, if either that image shows (failed.png) or the text says "Sorry! Something isn't quite right." I want to fire a trigger. How would I go about this? I'll also have a different trigger if it's successful, which would be a different image.
<div class="page page--result result center">
<img src="/images/fb/failed.png" class="result__img result__img--success"/>
<p>Sorry! Something isn't quite right.</p>
<br/>
Thanks
david
My page is divided into sections : #page-1 and #page-2
See Plnkr: http://plnkr.co/edit/RZJLmsWDfs63dC0QuDJi
<body>
<section id="page-1">
This is page 1. It takes the whole height of the browser. User has to scroll down to see page-2.
</section>
<section id="page-2">
<span class="animated bounce">This is page 2 </span>
</section>
</body>
Animation classes are being applied to different elements in #page-2.
However by the time the user scrolls down to these elements, the animation has already finished. Hence they just look like static objects.
Is there anyway I can detect when #page-2 is currently being viewed and then call a function to addClass('animated bounce') to certain elements ?
I would like to achieve this in angularjs if possible
I have found a angularjs directive that is probably helpfull for you in this case. Inview tries to solve this exact problem by reporting to you if a dom element is visible on the screen. Unfortunately I have been unable to test my solution because I couldn't find a minified js file of Inview but I assembled some code that should work:
<section id="page-2" in-view="{$inview ? isFocused=true;}">
<div ng-class="{'animated bounce': isFocused}">This is page 2 </div>
</section>
The $inview is supposed to be true whenever the element is in visible in the browser. This leads to the scope variable isFocused being set to true and therefor the animation class is added to your div.
This should work as you have intended in your question, if it does not work for some reason please let me know so I can improve my answer.
Is it possible to put html content into a popover?
this is the string that i need to put into the popover
HTML
$scope.info="sentence " +
"<ul>"+
"<li>first list member</li>"+
"<ul>"+
"<li>element of the first list</li>"+
"</ul>"+
"</li>"+
"<li>second element</li>"+
"<ul>"+
"<li id=\"infoLi\">element of the second</li>"+
"</ul>"+
"<li>third element</li>"+
"<ul>"+
"<li id=\"infoLi\">first element of the third</li>"+
"<li id=\"infoLi\">second element of the third</li>"+
"</ul>"+
"</ul></div>"
I have seen in the documentation of angular-ui-popover, that it is possible to set the option of the popover, and seeing around the web I find someone says that it is possible, in this option, to set a parameter HTML to true and get this result.
I have found no sample of that, and i don't know if it is true, my first problem to attempt this is that i didn't understand how to set the options.
A possible solution for me is even to leave a string in the popover but i need to use the new line tag, that i see it doesn't work in the popup content.
EDIT
maybe i wasn't so clear, i'm trying to do that with angular ui and ui bootstrap.
ok i have found a solution, that as i saw, for the moment it doesn't work for the popover ,while for the tooltip yes.
HTML
<button id="infobtn" tooltip-html-unsafe="<div>first list member
<li>element of the first list</li>
second element
<li id='infoLi'>element of the second</li>
third element
<li id=\"infoLi\">first element of the third</li>
<li id=\"infoLi\">second element of the third</li>
</div>
"tooltip-trigger="mouseenter">
<img src="images/info.png"></button>
The tag tooltip-html-unsafe make possible to insert a DIV or anything else is html, in the tooltip content, i have try to use it in the popover too but for some reason it doesn't work. I don't know if the cause was something that i was doing wrong or else, so i decided to use ui.tooltip module and i have resolved the problem.
I am using Angular UI Bootstrap http://angular-ui.github.io/bootstrap/. I have two questions:
I followed the example given at angular-ui.github.io, there they use
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js">
but I don't want to use the CDN so I downloaded Angular UI and added it to my project. How to include it into my code?
I did add
['ui.bootstrap'] to my angular.module, but it's not working until I add the above script code.
I'm using <tabset> to create two tabs, contacts and group. For
example, a user is in the Group tab, he wants to add members to an existing group, so if he clicks the Add Member button, I want to navigate to the Contacts tab automatically.
I thought of using document.getElementByTagName() inside my
controller. Will it work? And what is the Angular way to click
something programmatically.
Question #1:
<script src="folder_of_js/ui-bootstrap-tpls-0.10.0.js"></script>
Question #2:
You don't use document.getElementByTagName() with AngularJS, if you want to navigate to a tab while you are in another tab's content, an example might be the following:
<tabset>
<tab ng-repeat="tab in tabs" heading="{{tab.title}}">
{{tab.content}}
<button class="btn btn-default btn-sm" ng-click="tabs[2].active = true">Select third tab</button>
</tab>
</tabset>
As you can also see in this plunker, I added a button that navigates to the third tab whenever you click it.
The script file is probably not loaded by the browser. You have to add a script tag pointing to where the file is in your project. For example, if the script is placed in the folder /scripts/lib/:
<script src="/scripts/lib/ui-bootstrap-tpls-0.10.0.js" />
One of the golder rules of AngularJS is to never, for any reason, referrence the DOM (i.e. an HTML element) from a controller. So while document.getElementByTagName() will technically work, I would advice against it.
In angular, you really don't click things programmatically. The common way is to bind something in your HTML to a variable in the $scope, either by curly brackets ({{someVariable}}), or by directives such as ng-class, ng-bind etc. Then you change that variable in $scope, and the HTML changes to reflect that. Is there a variable in $scope which determines which tab is open? If so, you can just change that variable, and it should work automagically.
I am trying to find Submit element. My HTML structure is as below.
<div>
<span class="combutton">Submit</span>
</div>
<div>
<span class="combutton">Cancel</span>
</div>
In browser using firebug I tried
$('div .combutton')[0].click()
which clicks on submit perfectly. But using selenium driver this element is not found. Please tell me how to do this using
driver.findElement(By.css("CSSSELECTORSTRING"))
What you did in Firebug shouldn't have any effect since it's clicking on a span and not the a inside it.
This should work, unless you omitted certain parts of your markup that would otherwise prevent it:
driver.findElement(By.cssSelector("div:first-child .combutton a")).click();
try that :
driver.findElement(By.xpath("//div span.combutton a[contains(.,'Submit')]")).click();
or
driver.findElement(By.xpath("//div span.combutton[0] a")).click();