Опасно SetInner HTML в реактивном приложении не работает для включения тегов Segment.io - PullRequest
Новая
       12

Опасно SetInner HTML в реактивном приложении не работает для включения тегов Segment.io

0 голосов
/ 07 января 2020

Я пытаюсь включить Segment.io в моё приложение реакции / Далее JS. Я следую соглашению, установленному предыдущей функцией, которая устанавливает Google Analytics 

const segmentWriteKey = 'xyz';

export default class CustomDocument extends Document {
  setGoogleTags = () => {
    return {
      __html: `
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
        gtag('config', '${gaTrackingId}');
        console.log('here2');
      `,
    };
  };

  setSegment = () => {
    return {
      __html: `
      !function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on"];analytics.factory=function(t){return function(){var e=Array.prototype.slice.call(arguments);e.unshift(t);analytics.push(e);return analytics}};for(var t=0;t<analytics.methods.length;t++){var e=analytics.methods[t];analytics[e]=analytics.factory(e)}analytics.load=function(t,e){var n=document.createElement("script");n.type="text/javascript";n.async=!0;n.src="https://cdn.segment.com/analytics.js/v1/"+t+"/analytics.min.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(n,a);analytics._loadOptions=e};analytics.SNIPPET_VERSION="4.1.0";
              analytics.load(${segmentWriteKey});
              analytics.page();
              console.log('here1');
      `,
    };
  };

<script
            dangerouslySetInnerHTML={this.setGoogleTags() /* eslint-disable-line react/no-danger */}
          />
          <script
            dangerouslySetInnerHTML={this.setSegment() /* eslint-disable-line react/no-danger */ }
          />

. Я вижу, что вызывается «here2», но никогда не «here1». Какие-нибудь мысли?

1 Ответ

0 голосов
/ 07 января 2020

Похоже, ваша функция закрыта неправильно. К концу функции в строке __html необходимо добавить две закрывающие скобки: 

      ...
      analytics.page();
      console.log('here1');
    };
  };
`,

Мне также не ясно, откуда берется значение ${segmentWriteKey}. Вы можете не захотеть синтаксис ${}, если не хотите использовать литералы шаблона (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals). Также кажется, что для вызова analytics.load() требуется два параметра.

...