Как добавить скрипт мониторинга на AMP-сайт?

Я уже около месяца пытаюсь решить эту проблему.

У меня весь этот веб-сайт разработан в коде AMP (без WordPress).

И мне нужно включить сценарий мониторинга на веб-сайт, чтобы иметь интеграцию с RD Station (маркетинговая платформа для анализа данных о лидах).

Это сценарий мониторинга:

<script type="text/javascript" async src="https://d335luupugsy2.cloudfront.net/js/loader-scripts/XXXXXX-XXXX-XXXXX-XXXXXXXXXX-loader.js" ></script>

Если я просто помещу сценарий на страницу, интеграция будет работать, но AMP не будет проверяться, поэтому это не вариант.

Итак, я попытался поставить скрипт мониторинга с помощью AMP Iframe и с помощью AMP Script. Но успеха у меня не было.

Я покажу выше, как я пытался их использовать:

Сначала я попытался поместить скрипт внутри AMP Iframe. Но это не сработало, AMP не прошел валидацию (Пользовательский JavaScript не разрешен).

<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

<amp-iframe 
        width="200" 
        height="200"
        sandbox="allow-scripts allow-same-origin"
        layout="responsive"
        frameborder="0"
        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d230483.1797142007!2d-49.429883892450135!3d-25.495050065392732!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94dce35351cdb3dd%3A0x6d2f6ba5bacbe809!2sCuritiba%2C%20PR!5e0!3m2!1spt-BR!2sbr!4v1605306200439!5m2!1spt-BR!2sbr">
    
        <script type="text/javascript" async src="https://d335luupugsy2.cloudfront.net/js/loader-scripts/XXXXXX-XXXX-XXXXX-XXXXXXXXXX-loader.js"></script>
    
   </amp-iframe>

Затем я попробовал использовать скрипт AMP. AMP был проверен, но скрипт мониторинга не работал.

  <script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>
    <meta name="amp-script-src" content="sha384-OuN5AY4PdspoRf-q4DCxQvMVtBnT8yCs45AH1_0J1r5-u-VvxNTHvVEewVxeaefDd">
    
    <amp-script width="200" height="100" src="https://d335luupugsy2.cloudfront.net/js/loader-scripts/XXXXXX-XXXX-XXXXX-XXXXXXXXXX-loader.js">
    </amp-script>

Последняя попытка AMP SCRIPT выдает ошибку:

log.js: 258 [amp-script] Uncaught TypeError: Невозможно прочитать свойство appendChild из undefined в (amp-script% 5Bsrc =% 22https: //d335luupugsy2.cloudfront.net/js/loader-scripts/XXXXXX-XXXX- XXXXX-XXXXXXXXXX-loader.js% 22% 5D.js: 3)

Может кто-нибудь помочь мне решить эту проблему, пожалуйста? Мне действительно нужно, чтобы этот скрипт работал на моей странице AMP. Большое спасибо!


amp-html amp-iframe ampscript
person João Felipe    schedule 13.11.2020    source источник
comment
Я думаю, вам придется попросить AMP поддержать ваш вкус аналитики. Пользовательские методы JS и iframe не будут работать, потому что, по сути, вам нужна XHR информация. Команда AMP обычно оперативно реагирует на просьбу о поддержке нового поставщика аналитики. Предлагаем вам открыть проблему в github.com/ampproject/amphtml/issues   -  person Jay Gray    schedule 15.11.2020

Ответы (1)


arrow_upward
0
arrow_downward

Согласившись с ответом Джея и добавив к нему: <amp-script> запускает код с виртуальным DOM в Web Worker. Весь DOM API и веб-API не поддерживаются, поэтому любой значительный объем стандартного JavaScript потребует изменений для работы в этом контексте. Ваши шансы заставить сторонний скрипт работать там крайне низки.

Я думаю, что лучший подход здесь - просто добавить на вашу страницу код JavaScript поставщика. Это больше не будет действительным AMP, а это значит, что ваша страница не попадет в кеш AMP. Таким образом, вы потеряете это преимущество в скорости, а сторонний скрипт, несомненно, скажется на вашей производительности. Но это совершенно правильный подход! Пока большая часть вашей страницы придерживается AMP, ее шансы на то, что она будет быстрой и стабильной, и пройти Core Web Vitals, весьма высоки.

person Ben Morss    schedule 17.12.2020
comment
Спасибо, Бен! Я сделал это, как вы рекомендовали в тот день. Я забыл обновить свой вопрос здесь, в переполнении стека. Веб-сайт по-прежнему работает быстро, и моя команда довольна подходом. - person João Felipe; 18.12.2020
comment
Замечательно! Я просто подумал, что просто поставлю ответ здесь, чтобы другие тоже могли его узнать. Я не думаю, что люди всегда рассматривают возможность использования недействительного AMP. - person Ben Morss; 20.12.2020