Using IF conditional in Google Tag Manager with querySelectors

Question

Issue

Keep getting 'undefined' as returned google tag manager variable.

Description

I am trying to write a custom javascript variable to pull 'data-name' IF the 'data-form-title' returns ""

I have a website I am trying to tag and need to grab the form names. The problem came into play where some of the forms' names come back as "" so I wanted to use IF/Then logic to choose another attribute if the first came back empty.

Form that has proper form title https://www.mcgeetoyotaofclaremont.com/popup-availability

Form that has empty "" form title ('text yourself a link') https://www.mcgeetoyotaofclaremont.com/vehicle-details/new-2020-toyota-yaris-hatchback-le-claremont-nh-id-33375400#

What I've Tried

I've tested both querySelectors and they both work on their own. It's when I try to make the IF condition that I run into issues.

I have also tried var answer = 'Unknown' and then replacing the variable with either formtitle or datatitle, depending on the conditional, so that the script only had 1 return in the function.

For the life of me this seems simple and when I cross-check other examples (such as taking the name out of the function) it seems it should work fine.

Current Code

function() {

var formtitle = document.querySelectorAll('form[data-form-title]')[0].attributes['data-form-title'].nodeValue;

var datatitle = document.querySelectorAll('form[data-form-title]')[0].attributes['data-name'].nodeValue;


if (formtitle != ""){
    return formtitle;
    } else {
    return datatitle;
    }   
}

Matus · Accepted Answer · 2019-12-12 11:30:12Z

1

When I try to run your current code on your forms I get an error: Uncaught TypeError: Cannot read property 'nodeValue' of undefined. This error would make your GTM function return undefined every time.

the problem seems to be this line of code:

var datatitle = document.querySelectorAll('form[data-form-title]')[0].attributes['data-name'].nodeValue;

there is no data-name attribute. So you either need to make sure you are trying to access the right attribute or you can simply surround your variables in try-catch blocks like this:

function() {
  var formtitle = document.querySelectorAll('form[data-form-title]')[0].attributes['data-form-title'].nodeValue;

  var datatitle = '';
  try{
    datatitle = document.querySelectorAll('form[data-form-title]')[0].attributes['data-name'].nodeValue;
  }catch(err){}


  if (formtitle != ""){
    return formtitle;
  } else {
    return datatitle;
  }   
}

answered Dec 12, 2019 at 11:30

Matus

1,41913 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Garrett Mark Scott Over a year ago

Thank you! This worked as expected and uses the datatitle when formtitle == "" on form submission. Knowing that if a single var throws an error, the who function breaks is VERY helpful for future situations.

Collectives™ on Stack Overflow

Using IF conditional in Google Tag Manager with querySelectors

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related