Puppeteer爬虫项目访问GTM的dataLayer失败，寻求技术协助

我在网络爬虫项目中需要访问dataLayer并验证其中的数据，但使用Puppeteer编写的代码在尝试访问GTM脚本时触发预设错误提示。代码如下：

const puppeteer = require('puppeteer');
const fs = require('fs');
const fetch = require('node-fetch');
const {google} = require('googleapis');

(async () => {
  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();

  try {
    // Código para extrair o datalayer aqui
    async function getGtmDataLayer(page) {
      // Insira aqui o ID do seu container do GTM
      const gtmContainerId = 'GTM-xxxxxxx';
    
       
      const scriptHandle = await page.$('script[src*="googletagmanager.com/gtm.js?id=xxxxxxx' + gtmContainerId + '"]');
        if (!scriptHandle) {
        throw new Error('Não foi possível encontrar o script do GTM');
}
      const scriptSrc = await scriptHandle.evaluate(el => el.src);

      const gtmUrl = scriptSrc.split('id=xxxxxxx')[1].split('&')[0];
    
      const url = `https://www.googletagmanager.com/gtm.js?id=${gtmUrl}`;
    
      const response = await fetch(url);
      const text = await response.text();
    
      const dataLayerRegex = /dataLayer\s*=\s*(.+?);/;
      const match = text.match(dataLayerRegex);
    
      if (!match) {
        console.error('Camada de dados não encontrada');
        return {};
      }
    
      return JSON.parse(match[1]);
    }
    const datalayer = await getGtmDataLayer(page);
     
    // Função para escrever os dados em um arquivo local JSON
     fs.writeFile('datalayer.json', JSON.stringify(datalayer, null, 2), (err) => {
      if (err) throw new Error('Algo deu errado ao escrever o arquivo');

      console.log('Arquivo gravado com sucesso!');
    });

  } catch (error) {
    console.error(error);
  } finally {
    await browser.close();
  }

})();

我认为问题出在与GTM的连接环节，希望有相关开发经验的人士提供帮助。

问题分析与修复方案 #

你的代码存在几个关键问题，导致无法正确获取dataLayer：

1. GTM脚本选择器错误 #

原选择器中多余了xxxxxxx字符串，拼接后会变成id=xxxxxxxGTM-xxxxxxx，根本匹配不到真实的GTM脚本标签。

2. 提取GTM ID的逻辑错误 #

拆分scriptSrc时用了错误的分隔符，导致无法正确提取容器ID。

3. 不必要的GTM脚本请求 #

直接请求gtm.js文件并正则匹配dataLayer的方式不可靠：一是GTM的脚本内容会动态变化，正则容易失效；二是这种请求可能触发GTM的访问限制，而且页面中的window.dataLayer已经可以直接获取，无需额外请求。

4. 异步文件写入的时序问题 #

fs.writeFile是异步回调，会导致浏览器可能在文件写入完成前就关闭，引发潜在错误。

修复后的代码 #

const puppeteer = require('puppeteer');
const fs = require('fs').promises; // 使用 promise 版本的 fs

(async () => {
  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();

  // 先导航到目标页面！原代码缺失了这一步，必须先加载页面才能获取dataLayer
  await page.goto('https://你的目标页面URL.com', { waitUntil: 'networkidle2' });

  try {
    async function getGtmDataLayer(page) {
      const gtmContainerId = 'GTM-xxxxxxx';
      
      // 修复选择器：匹配包含正确GTM ID的脚本标签
      const scriptHandle = await page.$(`script[src*="googletagmanager.com/gtm.js?id=${gtmContainerId}"]`);
      if (!scriptHandle) {
        throw new Error('Não foi possível encontrar o script do GTM');
      }

      // 直接从浏览器上下文获取window.dataLayer，这是最可靠的方式
      const dataLayer = await page.evaluate(() => {
        // 返回dataLayer的副本，确保能序列化为JSON
        return window.dataLayer ? JSON.parse(JSON.stringify(window.dataLayer)) : [];
      });

      if (!dataLayer || dataLayer.length === 0) {
        console.error('Camada de dados não encontrada');
        return [];
      }

      return dataLayer;
    }

    const datalayer = await getGtmDataLayer(page);
     
    // 使用promise版本的writeFile，确保写入完成后再继续
    await fs.writeFile('datalayer.json', JSON.stringify(datalayer, null, 2));
    console.log('Arquivo gravado com sucesso!');

  } catch (error) {
    console.error(error);
  } finally {
    await browser.close();
  }

})();

关键修改说明 #

• 添加页面导航：原代码缺少page.goto，必须先加载目标页面才能访问页面中的dataLayer和GTM脚本。
• 修复选择器：直接用模板字符串拼接GTM ID，确保选择器匹配正确的脚本标签。
• 直接获取window.dataLayer：通过page.evaluate在浏览器上下文访问window.dataLayer，这是获取dataLayer最直接可靠的方式，避免了请求外部脚本的风险。
• 使用fs.promises.writeFile：将异步文件写入改为promise形式，确保文件写入完成后再关闭浏览器，避免时序问题。

内容的提问来源于stack exchange，提问作者Andre Silva