如何使用Google跟踪代码管理器提取部分URL路径

已更新：2020年3月13日

这篇博客文章听起来可能类似于我’最近出版， 如何提取URL的查询参数，但这一次解决了一些不同的问题。在该博客文章中，我正在使用查询参数。例如，我能够获取 productId 如果页面URL是 http：// _www.example.com?productId=123.

但是今天’s blog post, let’假设我们有以下结构的URL： //www.example.com/products/category_name/id 我们想把 分类名称 放入GTM变量中（知道类别名称始终位于“页面路径”的第二个子目录中。

我们如何实现这一目标？让’s find out.

如果你’不知道URL中的子目录是什么 在这个博客中 帖子显示清楚。

回到我们的例子。为了访问URL的第二个子目录，我们需要编写一些自定义JavaScript。我们’请尝试逐步进行操作，以便对那些刚开始使用JavaScript的人更容易理解（免责声明：我也属于 仍然 以JS开头）。

匿名JavaScript函数

为了提取部分网址路径，我们’我将需要使用自定义JS变量。这个通用变量必须包含一个满足两个条件的脚本：

• 它必须是匿名函数，例如 function（）{… }
• 它必须返回一些值

毫不犹豫地，让’s打开文本或代码编辑器（或仅在GTM界面中的Custom JS编辑器）并粘贴以下代码：

function（）{
  
}

它不会做任何事情（但这只是我们Custom JS变量的开始）。

现在，让’创建一个JavaScript变量并将其命名 pageUrl然后，让’为其分配一个值， window.location.href:

function（）{
  var pageUrl = window.location.href;
}

window.location.href 是一种访问用户/访问者所在页面的当前URL的方法。在下一步中，让’s 返回 that pageUrl 但只有一部分。我们可以通过 split（）方法，它将字符串（在本例中为URL）拆分为子字符串数组。如果你’re new to this, we’我会仔细看看。

添加一个 返回对该脚本的声明（因为GTM中的每个Custom JS变量都必须返回某些内容），然后是您要返回的变量的名称 (pageUrl），最后，让’s add a 分裂 方法。

function（）{
  var pageUrl = window.location.href;
  返回 pageUrl.split();
}

但是那’不是全部。我们需要告诉 split（） 方法我们要如何精确地拆分页面URL。如果回到我们的例子，我们’re working with the //www.example.com/products/category_name/id （如果您是’重新尝试遵循他的方法，您可以在URL包含某些子目录的其他页面上工作）。

从该URL，我们要访问 分类名称。由于它被斜杠（/）包围，因此可以用作我们的分隔符（分隔符）  分裂 方法。让’s加上该斜杠（用引号引起来）。

function（）{
  var pageUrl = window.location.href;
  返回 pageUrl.split("/");
}

结果，这将返回一个数组（简单地说， 清单）中的所有部分。这里’更直观的解释。使用之前 split（） 方法，页面URL如下所示：

//www.example.com/products/category_name/id

使用该方法后，结果在视觉上将如下所示：

如您在上方所见，URL被分为6项列表，以 https 并以 ID。 列表中的第二项为空（“”），因为https中的两个斜杠之间没有任何内容：//.

We’re almost there. 分类名称 已与URL分离，我们现在要做的就是从此数组中选择它。这可以通过定义该数组成员的索引来完成。在我们的示例中，该数字为4。如果您要获取“页面路径”的第3级（ ID），那么您应该输入数字5。

在split方法之后添加它（用方括号括起来）：

function（）{
  var pageUrl = window.location.href;
  返回 pageUrl.split("/")[4];
}

唐e!

 

Custom JavaScript 变量

现在，让’将此代码粘贴到自定义JavaScript变量中（在GTM界面中）。您可以使用适合容器命名约定的任何名称进行命名，例如 cjs–URL的第二个子目录

Save the 变量, enable the 预览和调试模式Â转到要测试此变量的页面（请确保URL在“页面路径”中包含某些内容（至少2个级别，又名文件夹，又名子目录）。

预期结果应如下所示（当然，您的情况下该值将有所不同）。

 

这也可以应用于其他网址

唐’仅使用页面URL来限制自己。您也可以将其应用于其他地址，例如，点击URL，视频URL等。您只需要为 pageUrl 变量（在该自定义JavaScript中）。这里’s是一个示例，说明您要访问Clicked URL的特定部分的外观。

function（）{
  var clickUrl= {{Click URL}};
  返回 clickUrl.split("/")[4];
}

而不是 window.location.href，我们使用了 点击网址 GTM容器的变量（只需确保在容器中启用了此内置变量）。然后脚本将 点击网址，将其拆分（“/”），然后选择索引为4的项目。

请记住，JavaScript中的索引以0（零）开头，因此，第4个元素实际上是第5个元素。

 

唐’t limit yourself

有无数的用例 分裂（） 方法真的很有价值。假设您有一个名为{{dlv –productId}}，它返回以下结构的产品ID— productId-variantId （例如123456-887766），而您只想使用 productId （没有 variantId）。

在这种情况下，自定义JS代码如下所示：

function（）{
  var productId = {{dlv- productId}};
  返回 productId.split("-")[0];
}

说明：

• 我在代码中将var（变量）命名为 productId
• 我为该变量分配了数据层变量的值 {{dlv– productId}}
• 我将破折号（–）作为分隔符（分隔符），因为我想在横杠所在的位置正确分割产品ID（提醒：初始ID看起来像这样 123456-887766)
• 当一个 分裂（） 方法创建了两个项目的数组（123456 和 887766）。 我选择了第一个。在JavaScript中，第一项的索引号是0（零），而不是1，因此我输入了0。

如果该变量将返回值123456 dlv– productId 变量’值是123456-887766）。

 

使用Google跟踪代码管理器提取部分网址路径：最终词

以便’有关这篇简短的博客文章。的 split（） 当我需要解析一个字符串（通常是URL）并获取它的一部分时（如果输入值始终遵循相同的结构），该方法在此类任务中绝对非常有用。

如果有任何极端情况，’d想找到解决方法，请在下面给我留言。这样的案例也帮助我学习（自从我’我仍然在我的JS旅程的开始阶段）。