Блог

Главная - Вопросы по программированию - Как загрузить модуль React GTM в проекте Gatsby

Как загрузить модуль React GTM в проекте Gatsby

#javascript #reactjs #gatsby

Вопрос:

Я пытаюсь использовать react-gtm-module в своем проекте Gatsby, я использовал библиотеку @loadable/component для загрузки этого модуля в свой компонент. Итак, когда я запускаю gatsby develop , я получаю ошибку TagManager.initialize is not a function

Это и есть код:

 import loadable from '@loadable/component';

const TagManager = loadable(() => import('react-gtm-module'));

export const setupGtm = () => {
  if (typeof window !== 'undefined') {
    TagManager.initialize({
      gtmId: 'GTM-ID',
    });
  }
};

Я бы очень хотел использовать react-gtm-module , потому что у меня уже есть несколько предварительно настроенных кодов, кто-нибудь знает, как использовать no gatsby?

Спасибо!!

Комментарии:

1. У вас есть модуль GTM, настроенный в вашем gatsby-config.js ?

Ответ №1:

Чтобы это работало должным образом, вам необходимо установить плагин Gatsby, называемый Google Tagmanager внутри вашего проекта gatsby, вы можете это сделать. запустив

npm install gatsby-plugin-google-tagmanager

Когда вы закончите, вы должны настроить плагин в своем gatsby-config.js gatsby-config.ts файле или.

Ознакомьтесь с этим документом от Гэтсби для получения дополнительной информации.

Комментарии:

1. Спасибо, я попробовал с этим плагином, и теперь я получаю ошибку: gtag не определен

2. Определение gtag появится в вашем gatsby-config.js файле, как вы его там настроили? Или это сделал ты?

Ответ №2:

Не используйте зависимость на основе реакции. Для этого гораздо проще использовать собственные плагины Gatsby, так как они автоматически вставят скрипт в нужные места. Я бы предложил отказаться от этого фрагмента и использовать gatsby-plugin-google-tagmanager :

 // In your gatsby-config.js
plugins: [
  {
    resolve: "gatsby-plugin-google-tagmanager",
    options: {
      id: "YOUR_GOOGLE_TAGMANAGER_ID",

      // Include GTM in development.
      //
      // Defaults to false meaning GTM will only be loaded in production.
      includeInDevelopment: false,

      // datalayer to be set before GTM is loaded
      // should be an object or a function that is executed in the browser
      //
      // Defaults to null
      defaultDataLayer: { platform: "gatsby" },

      // Specify optional GTM environment details.
      gtmAuth: "YOUR_GOOGLE_TAGMANAGER_ENVIRONMENT_AUTH_STRING",
      gtmPreview: "YOUR_GOOGLE_TAGMANAGER_ENVIRONMENT_PREVIEW_NAME",
      dataLayerName: "YOUR_DATA_LAYER_NAME",

      // Name of the event that is triggered
      // on every Gatsby route change.
      //
      // Defaults to gatsby-route-change
      routeChangeEventName: "YOUR_ROUTE_CHANGE_EVENT_NAME",
      // Defaults to false
      enableWebVitalsTracking: true,
    },
  },
]

Вы можете опустить параметры, которые вы не будете использовать.

Метки: