Omniture tagging - Fire a start event on Onchange (Not Working !!!!) - adobe-analytics

I am a newbie to Omniture tagging. The company has provided specs and I am following that. I want to fire a start event when the value in the dropdown changes. I don't know what I am missing because it refuses fire the event. I am using Omnibug to test.
<select name="seltest" onChange = "var s=s_gi('ds-prod');tmsomni.linkTrackVars=
'prop6,prop64';tmsomni.linkTrackEvents = 'event54';tmsomni.prop6 = 'vehicle
request';tmsomni.prop64 = 'vehicle'; s.tl(true, 'o');">
<option>1</option>
<option>2</option>
</select>

Your setting the tracking object to s and then using tmsomni to set values in the tracking object. It should look more like this:
<select name="seltest" onchange="window.tmsomni=s_gi('ds-prod');tmsomni.linkTrackVars= 'prop6,prop64';tmsomni.linkTrackEvents = 'event54';tmsomni.prop6 = 'vehicle request';tmsomni.prop64 = 'vehicle'; tmsomni.tl(true, 'o');">
<option>1</option>
<option>2</option>
</select>
Or perhaps the inverse where you would replace all tmsomni with s.

Also set the events variable as below:
<select name="seltest" onchange="window.tmsomni=s_gi('ds-prod');tmsomni.linkTrackVars= 'prop6,prop64';tmsomni.linkTrackEvents = 'event54';tmsomni.events = 'event54';tmsomni.prop6 = 'vehicle request';tmsomni.prop64 = 'vehicle'; tmsomni.tl(true, 'o');">
<option>1</option>
<option>2</option>
</select>

It worked , I was missing the name of the link.

Related

Playwright - select random option

I want the test to filter the results randomly.
Choosing option:
selects = section.locator("select")
number_of_selects = selects.count()
chosen_number = randint(1, number_of_selects)
chosen_select = elements.nth(chosen_number - 1)
options = chosen_select.locator("option")
number_of_options = options.count()
chosen_number = randint(1, number_of_options)
chosen_option = options.nth(chosen_number - 1)
When I try to select the chosen option, I get a problem:
I've tried with text_content()...
select_name = chosen_select.text_content()
option_name = chosen_option.text_content()
page.locator(select_name).select_option(label=option_name)
...with get_attribute()...
chosen_value = chosen_option.get_attribute("value")
page.locator(select_name).select_option(chosen_value)
...but i get an error every time:
Locator.select_option(-YesNo)
waiting for selector "-YesNo"
HTML:
<selecet id="listYN">
<option value=-1>"-"</option>
<option value=YES>"Yes"</option>
<option value=NO>"No"</option>
</select>
How can I randomly select options?
after a few hours, I found the answer:
chosen_select.select_option(chosen_value)

Conditional rendering of a Form.Item on Ant design

I'm trying to make a form using Ant design v4.0. The display of an Form.Item (Input text) depends of the value of other Form.Item (Radio button group). I'm using form.getFieldValue('fieldname') and it works initially but, when I changed the value of the radio Botton group the field is still showing up.
The code is similar to this
(...)
const [form] = useForm();
(...)
<Form form={form} (...)>
<Form.Item name="fieldname" initialValues={props.initialValues}>
// Here it is a radio button group
</FormItem>
{ form.getFieldValue('fieldname') === 'a_value' && (
<Form.Item name="a-text-field>
// here it is an input text
</Form.Item>
)}
</Form>
As I said before, it works with the initial value but if I changed the option it doesn't work. I also try the prop in the field a-text-field but it didn't work
hidden={form.getFieldValue('fieldname') !== 'a_value'}
it's because if the radio input changed, it does not change the form.item value so doing form.getFieldValue('fieldname') will not work. You may use a state instead and use onValuesChange prop of the form:
const [radioValue, setRadioValue] = useState("a_value");
const [form] = useForm();
(...)
const handleFormValuesChange = (changedValues) => {
const fieldName = Object.keys(changedValues)[0];
if(fieldName === "a-text-field"){
const value = changedValues[fieldName];
setRadioValue(value)
}
}
<Form form={form} onValuesChange={handleFormValuesChange}>
<Form.Item name="fieldname" initialValues={radioValue}>
// Here it is a radio button group
</FormItem>
{ radioValue === 'a_value' && (
<Form.Item name="a-text-field'>
// here it is an input text
</Form.Item>
)}
</Form>
here is the link of working sample
Check out this example in antd documentation.
https://ant.design/components/form/#components-form-demo-control-hooks
This doesn't require any state variables. The 'shouldUpdate' prop rerenders the specific form.item.

Svelte: How to bind a formatted input field to a property

First of all: Svelte is still new to me. I hope the question is not too trivial.
Within a simple component I want to use the content of a formatted input field for a calculation.
For example:
In the input field a Euro amount should be displayed formatted (1.000).
Next to it a text with the amount plus VAT should be displayed (1.190).
How I do this without formatting is clear to me. The example looks like this:
export let net;
export let vat;
$: gross = net + (net * vat / 100);
$: grossPretty = gross.toLocaleString('de-DE',{ minimumFractionDigits: 0, maximumFractionDigits: 0 });
with a simple markup like this:
<form>
<label>Net amount</label>
<input type="text" step="any" bind:value={net} placeholder="Net amount">
</form>
<div>
Gros = {grossPretty} €
</div>
In vue i used a computed property. Its getter delivers the formatted string and its setter takes the formatted string and saves the raw value.
(In data() I define net, in the computed properties i define netInput. The input field uses netInput as v-model).
It looks like this:
netInput: {
get(){
return this.net.toLocaleString('de-DE',{ minimumFractionDigits: 0, maximumFractionDigits: 0 });
},
set(s){
s = s.replace(/[\D\s._-]+/g, "");
this.net = Number(s);
}
}
How can I handle it in svelte?
You can do something somewhat similar, you create another computed variable that stores the deformatted string from the input field and is used in the calculation instead of the direct input
export let net;
export let vat;
$: net_plain = Number(net.replace(/[\D\s._-]+/g, ""));
$: gross = net_plain + (net_plain * vat / 100);
$: grossPretty = gross.toLocaleString('de-DE',{ minimumFractionDigits: 0, maximumFractionDigits: 0 });
But maybe find a better name for the variable :)
Thanks to Stephane Vanraes I found a solution.
It has not the charm of the vue approach but it's ok. First I inserted 'net_plain'. To have the input field formatted during input, I added an event listener for the keyup event.
<input type="text" step="any" bind:value={net} on:keyup={handleKeyUp} placeholder="Net amount">
The event is handled from the function handleKeyUp as follows:
function handleKeyUp(event){
if ( window.getSelection().toString() !== '' ) {
return;
}
// ignore arrow keys
let arrows = [38,40,37,39];
if ( arrows.includes( event.keyCode)) {
return;
}
let input = event.target.value.replace(/[\D\s._-]+/g, "");
input = input ? parseInt( input, 10 ) : 0;
event.target.value = ( input === 0 ) ? "" : input.toLocaleString( "de-DE" );
}
BUT: If anyone has a solution using getter and setter I would appreciate the anwer!

How to create a Dart form

My problem: building a Dart form according to the book. Below, my basic sample that looks like JS. It works fine but I get this warning: The getter value is not defined for the class Element.
My question: how can I write a better Dart code to avoid this warning message? Thanks.
HTML:
<form>
<input type="number" min="0" id="enter-x">
<input type="number" min="0" id="enter-y">
<input type="button" id="result" value="Submit">
<input type="reset" id="raz" value="Reset">
<input type="text" id="s" readonly>
</form>
DART:
import 'dart:html';
import 'dart:core';
main() {
document.querySelector('#result').onClick.listen((e) {
calculateS();
});
}
calculateS() {
var x = int.parse(document.querySelector('#enter-x').value);
var y = int.parse(document.querySelector('#enter-y').value);
var surface = (x * y).toString();
document.querySelector('#s').value = surface;
}
Dart helps with hints and warning to find errors in your program.
The generic Element doesn't have a value field. The Dart program is still valid and should work as expected and doesn't cause any errors or warnings at runtime because the actually returned element is the more specialized TextInputElement or NumberInputElement which has a value field.
To silence the analyzer, make this more clear by adding a "cast"
calculateS() {
var x = int.parse((document.querySelector('#enter-x') as NumberInputElement).value);
var y = int.parse((document.querySelector('#enter-y') as NumberInputElement).value);
var surface = (x * y).toString();
(document.querySelector('#s') as TextInputElement).value = surface;
}
Try it at DartPad
See also:
https://api.dartlang.org/1.12.0/dart-html/InputElement-class.html
Dart 'query' explicit cast
What is the syntax for implicit cast operator in dart?
https://www.dartlang.org/docs/dart-up-and-running/ch02.html#operators

Is there any alternative to "a href" in html? I'm strictly mean "a"

Is there anything I can use instead of 'a' selector. Maybe something like <url href=""> or something similar. I'm trying to avoid 'a'. The reason for that is that I'm working with jQuery and its code modyfying every 'a' in the section. I want to keep some 'a's untouched. This is what i have:
HTML:
<div> <!-- █ POST █ -->
<h3>14 June 2012 - Noisettes for Spotify</h3>
<p>
We have supplied a sound equipment for the Noisettes concert on Spotify company event. Please enjoy <a class="inlink" target="_blank" href="http://www.youtube.com/watch?v=KRFHiBW9RE8">Noisettes on YouTube</a>.
</p>
</div>
JQUERY:
$(document).ready(function(){
var $posts = $('#items > div');
var maxHeight = 32;
$('a', $posts).live('click', function(){
var $par = $(this).prev('p');
var oH = parseInt($par.attr('class'));
if($par.height() == oH){
$par.animate({
'height': maxHeight
}, 'medium');
$(this).text('read more...');
}else{
$par.animate({
'height': oH
}, 'medium');
$(this).text('read less...');
}
});
$posts.each(function(){
if($('p', this).height() > maxHeight){
$('p', this)
.attr('class', $('p', this).height())
.css('height', maxHeight+'px');
$(this).append($('<a class="link">').text('read more...'));
}
});
});
It replaces my 'Noisettes on YouTube' (from html code) with 'read less...' (still working but wording changes. I was trying to use CSS but it still replaces it.
I hope I made myself clear on this :) Thanks for help in advance.
You should use a more specific selector:
$posts.find('a.SomeClass')...
Then change the links that you want this to apply to to <a class="SomeClass">.
Give all the "a" that you want to change a particular class, say "changeable", and then change your selector from $('a', $posts) to $('a.changeable', $posts)

Resources