How to implement amp-analytics view tracker inside a mustache template after submitting a form

Question

I have an amp form that will return a json value when I submitted it, and I bind the data into amp-mustache template. The problem is I need to use the amp-analytics to track the view and click inside those results. But the analytics code doesn't get fired when the mustache template are visible. Anyone has the same issue or already found the solution for this?

Thanks

Answer 1

I have just run into this exact problem, it looks like the issue is that the template content is not evaluated/bound or whatever when the page is first loaded meaning your main analytics triggers cant find it - i had a console error stating the selector i was using could not be found on load that indicated as much.

The solution (which might be more of a workaround for a bug at the moment), but makes sense if you look at it more as ajax loaded content that was not bound on page load, is to include an amp-analytics tag within the template tag so when that it is loaded when your template is and can bind properly to the new element.

I have also verified on my test site (as i was unsure) that this does not interfere with other tracking once added and will work each time the form is submitted on the same page.

Partial code example of a form success block (shown on successful submission) with a template:

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