Using Google Tag Manager to track the values of a formula field

Question

Using Google Tag Manager to track the values of a formula field

I am looking to track the selected destination in a form using Google Tag Manager.

To achieve this, I have created a custom JavaScript variable:

function() {
  var inputField = document.getElementById("country");
  return inputField.value || "";
}

When testing it in preview mode, I see the correct selection but not the desired value:

For example: If I choose "USA" from the form options:

<option value="2">USA</option>

I receive back "2" instead of "USA". However, I want the value "USA" to be captured in my dataLayer.

What could I be doing wrong?

Thank you in advance! :)

javascript

Answer 1

Answer №1

Why isn't it working properly?

You are inquiring about the value, which happens to be 2.

In order to retrieve the text of the chosen option, you will first need to locate the selected option element and then extract its text.

var selection = document.getElementById("country");
var opted = selection.options[selection.selectedIndex];
var extractedText = opted.text;
console.log(extractedText);

<select id=country>
    <option value=1>          One
    <option value=2 selected> Two
    <option value=3>          Three
</select>

Answer 2

Why isn't it working properly?

You are inquiring about the value, which happens to be 2.

In order to retrieve the text of the chosen option, you will first need to locate the selected option element and then extract its text.

var selection = document.getElementById("country");
var opted = selection.options[selection.selectedIndex];
var extractedText = opted.text;
console.log(extractedText);

<select id=country>
    <option value=1>          One
    <option value=2 selected> Two
    <option value=3>          Three
</select>

Using Google Tag Manager to track the values of a formula field

Answer №1

Similar questions

Troubleshooting: ngAnimate max-height failing to apply to specific element

Issues with the .change(function() JavaScript in Internet Explorer versions less than 9

How can I declaratively bind the properties in Dojo's _hasDropDown method?

The firebase collection's model doesn't include an add function within its nested collection

The positioning of the Material Ui popover is incorrect

Arrange images in a fluid manner around other images

What is the best way to showcase the array data of two description values in a Vue v-for loop?

Exploring the JSON Structure in NodeJS

Implementing a secure route in React that asynchronously checks user authentication status

Differences between the http module and Express framework

Perform multiple function invocations on a single variable using JavaScript

Why is AngularJS redirection not retrieving the value from window.localStorage?

What is the best way to invert the positioning of the li elements to move upwards?

The function you are trying to call is not valid... the specified type does not have any call signatures [ts 2349

React component failing to update upon rerender

Debugging with Webstorm in node.js may not navigate to breakpoints as expected

Is it possible to merge createStackNavigator with createBottomTabNavigator for enhanced navigation functionality

You are required to select one of the two radio buttons in order to proceed with the validation process

How can I access a PHP variable from an external .php file within a JavaScript script?

Refreshing the Angular resource under observation