I'm trying to get google tag manager to track a couple of different buttons on a site. We're currently unable to change the site to aid with this, so we have to find a solution solely with tag manager.
There are several buttons on the site all with the same format as to the two below.. they all have "submit" as the type and a unique term for value so I'm trying to use the tag manager Form Listener which picks up on type="submit". Is there any variable I can use to pull the value field into my event so I can create individual goals in analytics?
etc etc
Any help is greatly appreciated.
You can use built-in variable "Click Element", then create custom JS-variable:
function(){
try{
return {{element}}.getAttribute("value"); //I am not sure now if it is {{element}} or {{Click Element}}
}catch(err){}
}
This will give you a value attribute of clicked button.
Maybe a useful link by Simo Ahava:
http://www.simoahava.com/analytics/track-form-engagement-with-google-tag-manager/#3
You can use built-in auto-event variable Element Attribute to get value. And be sure to use click tracking and not form tracking, because you want to track button clicks and not form submissions.
Related
i am trying to Automate flipkart website in which i am trying to change address but "add new adress" is not getting clicked i have attached the snapshot
my code is like driver.findElement(By.xpath("//*[#id='ng-app']/div/div[2]/ul/li[2]/div/div[2]/div[2]/div[2]/a/span")).click();
please give the appropriate help
I doesn't look that you are clicking active element, the xpath is //*[#id='ng-app']/div/div[2]/ul/li[2]/div/div[2]/div[2]/div[2]/a/span not correct it clicks on some span.
Use Firepath https://addons.mozilla.org/en-US/firefox/addon/firepath/ to get the xpath.
To ensure that button is clickable Use isDisplayed() and isEnabled() method before clicking on "Add New Address" button, this method return boolean value.
driver.findElement(By.xpath("//*[#id='ng-app']/div/div[2]/ul/li[2]/div/div[2]/div[2]/div[2]/a/span")).isDisplayed();
driver.findElement(By.xpath("//*[#id='ng-app']/div/div[2]/ul/li[2]/div/div[2]/div[2]/div[2]/a/span")).isEnabled();
Also you can verify that element is exist on page or not using below code
if(driver.findElements(byVal).size()!=0){
// Element is present.
}
hope it may helpful to identify cause of issue, why its not clickable.
First and foremost, Use a customized Xpath instead of the one you are using which is extracted directly from the browser. If no customized Xpath can be constructed then try a customized Css or any other locator if possible.
Try to go through the following attempts in order (I hope you can grasp why this is):
1- If .click() still doesn’t work, then keep on changing the values of the attributes you are using to construct your customized xpath, cssSelector, or locator.
2- Use the Actions class.
3- Use JavaScript executioner
4- instead of click(), try using any of: .sendKeys(“\n”). Or .sendKeys(keys.ENTER) or .sendKeys(keys.RETURN)
I am clicking to modal window which is pretty simple. In general only relevant part is this:
<div id="partSelection">
<button value="0" name="partSelection">BLATNÍK P L</button>
<button value="1" name="partSelection">BLATNÍK P P</button>
I need to click one of this button, I know how to click this with:
xpath:
element(by.xpath('//*[#id="partSelection"]/button[2]')).click();
also way with button text:
element(by.buttonText("BLATNÍK P P")).click();
but I noticed there as different values for each button and I belieave this is something which is not going to change by developers. Is there a way how to click element base on value?
Thank you for your advises.
Adding to an existing answer.
You can solve it using the following CSS selector:
element(by.css("#partSelection button[value=0]")).click();
Or, using a by.xpath() locator:
element(by.xpath("//div[#id='partSelection']/button[#value='0']")).click();
Note that, if you are going to use the "by value" technique often, to follow the DRY principle, it could be a good idea to define a custom by.value() locator:
How to globally add a custom locator to Protractor?
this example should work if you want to just look up a specific attribute. I usually refer to this css selectors when I'm trying to figure out the best way to find a specific attribute.
basically the breakdown is to find the tag you want in our case we want button and then we want to find the attribute within that tag. So we have the choice of value or name. Name is the same for both buttons so we don't want to use that. However the value is different for each button so that would be good to use in this case.
element(by.ccs('tag[attribute=""]');
tag = button
attribute = value
element(by.css('button[value="0"]')).click(); // button with text BLATNÍK P L
element(by.css('button[value="1"]')).click(); // button with text BLATNÍK P P
I'm trying to figure out how to link an html picture element back to the database entry that was originally used to generate the picture link.
I am using Meteor:
- I have a database that contains photosets data from Flickr API
- In the HTML, I have a handlebar "each" script that iterates through each photoset in the database and then uses this info to generate the html for the photoset cover picture links.
- When the html renders, the photoset cover pictures are downloaded from Flickr and displayed to the screen.
I would like to be able to click on the photoset cover picture and then automatically generate the links to the pictures in the photoset. But I don't understand how to dynamically link the html picture elements back to their respective database entries that were originally used for generating the picture links. I need to be able to find the original database entries so that I can load the info needed for generation of subsequent links.
As a newb to all of this I'm not really sure where to start looking or what to try. I've wondered about creating an object with custom key pairs to 'memorise' the identity of each photoset picture. Is this the way to go, or is there an easier way that I am overlooking?
Thanks.
Say you have your pictures being put out this way:
Template.mytemplate.helpers({
picture:function() {
return pictures.find()
}
});
You can also do this instead, which is pretty much the same thing:
Template.mytemplate.picture = function() {
return pictures.find();
}
With the html
<template name="pictures">
{{#each picture}}
<img src="{{src}}" class="pictureselector"/>
{{/each}}
</template>
You can use events which can get data from that particular picture document/record
Template.mytemplate.events({
'click .pictureselector':function(event,template) {
console.log(this._id); //Should give you the `_id` of the picture that was clicked
}
});
this is the data context of the element that was clicked & generate the link you want using the data inside this.
Be careful if you use something with a callback inside the click like Meteor.call, you will have to relay the message down via var self = this otherwise the context of this would become the one of Meteor.call
These are my first steps with drupal.
I have created a taxonomy hierarchy for my articles and now I am trying to add a new field to the content type "Article" and "Media" so the content admin can assign a "category" to his new content.
So I've been to Structure > Content Types > Article > Manage Fields
Then "Add new field" with :
1- Label = Category
2- Name = "field_category
3- Field = "Term reference"
**4- Automatically changes to "Select list" but I am unable to see the drop down list options. Clicking the list doesn't do anything, I couldn't select Autocomplete or any other value I've seen on forums & tutorials. Using firebug I could see the options are there, but the list doesn't show up.**
This is happening with all types of fields, even with text fields, the most basic one.
Any idea why is this happening ?
As glumbo mentioned, the problem here is caused by jQuery 1.7 update. As of jQuery 1.6 DOM properties should be accessed using .prop() function.
There is an open issue with some hotfix solution:
You need to replace .attr() jQuery function call with .prop() in /modules/field_ui/field_ui.js at following lines:
100: $(this).html(html).attr('disabled', disabled ? 'disabled' : '');
253: $(ajaxElements).attr('disabled', true);
Please note that this fix modifies a Drupal core module and you'll probably want to use a patch (Dries would kill the kitty anyway:).
The problem is with jquery update. If you are using jquery 1.7 you will get this problem
i have requirement where i need to check if apex:inputCheckbox is checked, and if it isn't then raise an alert saying that its not checked.
<apex:inputCheckbox value="{!check}"/>
I am raising the alert from a java script. i am using actionfunction to call a apex method after the alert is raised.
What i need is a way to check if the checkbox is checked or not in javascript
Thanks
Prady
You can just give it an id, then use document.getElementById() to grab it:
<apex:inputCheckbox id="theCheckBox" value="{!Contact.Some_Checkbox__c}" onClick="alert('checked? ' + document.getElementById('{!$Component.theCheckBox}').checked);"/>
Note that if it's inside other elements with you may need to drill down to it, so if it was inside an <apex:pageBlockSection> with id="theSection" then you'd need:
document.getElementById('{!$Component.theSection.theCheckBox}');
Whether you need to do this or not depends on where your javascript is in the page with relation to the checkbox. Good luck!