javascript - 检查 Google 跟踪代码管理器中变量是否未定义

Question

我将这段代码作为 Google 跟踪代码管理器 中的 JavaScript 自定义变量。我想获取面包屑内容。

这部分代码运行良好。但有些页面没有面包屑，对于这些页面我使用标题代替。因为我不想在 Google Analytics 维度中出现未定义的情况。

到目前为止，作为代码的单独部分一切都很好。但是，如果我尝试检查 breadcrumbs 变量是否未定义(页面上没有 breadcrumbs 类，并且 breadcrumbs 变量基于 breadcrumbs 类的内容)，我将无法检查这一点。 “IF”语句不起作用。

我尝试了多种方法来检查变量(typeof、检查值...)，但对我来说没有任何效果。

你能帮我吗？

function() {
    var breadcrumbs = document.getElementsByClassName('breadcrumbs').item(0).innerText;


    if (typeof breadcrumbs === 'undefined'){
        breadcrumbs = {{JS - Title}}.substring(0, breadcrumbs.indexOf(' |'));
    }else{
        breadcrumbs = breadcrumbs.replace(/(?:\r\n|\r|\n)/g, '| '); 
    }

    return breadcrumbs;
}

Answer 1

您的代码存在的问题是，当没有带有 breadcrumbs 的元素时，breadcrumb 变量不会计算为 undefined，而是抛出错误类存在。但是，GTM 捕获此错误，并返回 undefined 作为整个函数(变量)的结果。所以，你的 if 语句实际上根本没有被评估。

如果直接从控制台运行代码，其中不存在相关元素，则会收到错误:

var breadcrumbs = document.getElementsByClassName('breadcrumbs').item(0).innerText;

VM29:1 Uncaught TypeError: Cannot read property 'innerText' of null at :1:73

为了克服这个问题，您应该分解获取相关元素的步骤，并相应地放置 IF 语句。例如

function() {
    //get all breadcrumb elements
    var breadcrumbElements = document.getElementsByClassName('breadcrumbs');

    //check, if any elements are found
    //if not, return title instead
    if (breadcrumbElements.length === 0){
        return {{JS - Title}};
    } 

    //breadcrumb found
    //return data from breadcrumb
    return breadcrumbElements.item(0).innerText.replace(/(?:\r\n|\r|\n)/g, '| '); 

}

请注意，我无法弄清楚为什么您引用 breadcrumbs 变量，而您希望它未定义:.substring(0, breadcrumbs.indexOf(' |')) 因此，我跳过了这部分，您可能需要调整该部分，以从 {{JS - title}}

获取预期值