как использовать плагин Google Tag Manager для gatsby? - PullRequest
Новая
       9

как использовать плагин Google Tag Manager для gatsby?

0 голосов
/ 19 октября 2018

Обратите внимание, что я все еще учусь использовать Gatsby & React.

Я пытался выяснить, как правильно использовать плагин Google Tag Manager для Gatsbyjs для вставки кодов отслеживания в мое приложение.

Официальная документация плагина не дает много идей и примеров, поэтому я не уверен, что полностью понимаю.

Что я хочусделать, чтобы вставить два кода отслеживания GTM в мое приложение, один в <head> и один в <body>.При использовании подхода статического сайта я мог бы просто скопировать и вставить коды отслеживания GTM в мои документы HTML, однако с помощью Gatsby & React это не сработало.

Например, я хочу вставить следующеекод для <head>

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXX');</script>
<!-- End Google Tag Manager -->

Я открываю файл gatsby-config.js и вставляю следующее в плагин 

// 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,

      // Specify optional GTM environment details.
      gtmAuth: "YOUR_GOOGLE_TAGMANAGER_ENVIROMENT_AUTH_STRING",
      gtmPreview: "YOUR_GOOGLE_TAGMANAGER_ENVIROMENT_PREVIEW_NAME",
    },
  },
]

Кажется, что единственное, что мне нужно сделать здесьзаменяет YOUR_GOOGLE_TAGMANAGER_ID моим собственным GTM-идентификатором.Однако после того, как я это сделал и проверил исходный код после сборки, он показывает 

<script async="" src="https://www.googletagmanager.com/gtm.js?id=GTM-XXXXX;gtm_auth=YOUR_GOOGLE_TAGMANAGER_ENVIROMENT_AUTH_STRING&amp;gtm_preview=YOUR_GOOGLE_TAGMANAGER_ENVIROMENT_PREVIEW_NAME&amp;gtm_cookies_win=x"></script>

, я что-то здесь упустил, Пожалуйста, помогите

1 Ответ

0 голосов
/ 19 октября 2018

Если вы собираетесь использовать плагин, упомянутый в вашем вопросе, то вы можете просто вставить этот плагин в gatsby-config.js файл внутри свойства плагина .

Однако, если вы простоЕсли вы захотите добавить тег <script>, который предоставляет вам GTM, вам придется немного настроить файл gatsby html.js.По сути, это позволит вам поместить все, что вы захотите, так же, как и в любой другой HTML-файл.

...