Как реализовать отслеживание представления amp-analytics внутри шаблона усов после отправки формы

Question

У меня есть форма amp, которая будет возвращать значение json при отправке, и я связываю данные в шаблон amp-mustache. Проблема в том, что мне нужно использовать amp-analytics, чтобы отслеживать вид и щелкать внутри этих результатов. Но код аналитики не срабатывает, когда виден шаблон усов. У кого-нибудь есть такая же проблема или уже нашли решение для этого?

Спасибо

Answer 1

Я только что столкнулся с этой точной проблемой, похоже, проблема в том, что содержимое шаблона не оценивается / не привязано или что-то еще при первой загрузке страницы, что означает, что ваши основные триггеры аналитики не могут ее найти - у меня была консольная ошибка с указанием селектора i не удалось найти при загрузке, что указывает на это.

Решение (которое на данный момент может быть скорее обходным путем для ошибки), но имеет смысл, если вы посмотрите на него больше как на загруженный с помощью ajax контент, который не был привязан к загрузке страницы, заключается во включении тега amp-analytics в шаблон тег, чтобы он загружался, когда ваш шаблон уже есть, и мог правильно привязаться к новому элементу.

Я также проверил на своем тестовом сайте (поскольку я не был уверен), что это не мешает другому отслеживанию после добавления и будет работать каждый раз, когда форма отправляется на той же странице.

Пример частичного кода блока успешной формы (показан при успешной отправке) с шаблоном:

<div submit-success>
            <template type="amp-mustache">
              Thanks {{name}}<br>
             {{{message}}}

             <amp-img
                width="1"
                height="1"
                alt="track-success"
                src="/resources/images/pixel.png"
                id="enquirySuccessGATracking"
                class="ga_track_custom_visible"
                data-vars-ga-category="static category"
                data-vars-ga-label="{{label}}"
                data-vars-ga-action="{{action}}"
                data-vars-ga-resource-id="{{customDimension1}}"
                data-vars-ga-resource-action-id="{{customDimension2}}"
            ></amp-img>


            <amp-analytics type="googleanalytics" id="amp-pagetracking">
                <script type="application/json">
                    {
                        "vars": {
                            "account": "your-account-id"
                        },
                        "triggers": {
                            "trackVisibleEventWithCustomDimensions": {
                                "selector": ".ga_track_custom_visible",
                                "on": "visible",
                                "request": "event",
                                "vars": {
                                    "eventCategory": "${gaCategory}",
                                    "eventAction": "${gaAction}",
                                    "eventLabel": "${gaLabel}"
                                },
                                "extraUrlParams": {
                                    "d1": "${gaResourceId}",
                                    "d2": "${gaResourceActionId}"
                                }
                            }
                        }
                    }
                </script>
            </amp-analytics>

            </template>
        </div>