在带有 querySelectors 的 Google Tag Manager 中使用 IF 条件

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;
    }   
}

Answer 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;
  }   
}