AMP Analytics

Validate your AMP Analytics configuration #

Newly generated projects come pre-integrated with AMP analytics already set up. Out of the box, projects should be set up to track AMP data via both Mobify's Engagement Engine and Google Analytics.

Currently tracked events for AMP include:

• Attempted loads (pre-bounce)
• Load times
• Page view
• Form and button interactions
• Open modal / close modal
• Add to cart

AMP analytics are set up and configured via the Analytics component, which is an extension of the official AMP amp-analytics component, and is also an official AMP analytics vendor.

Note that the Analytics component was made available for use as of v0.1.0 of the mobify-amp-sdk. You'll need to update to at least version v0.1.0 of the mobify-amp-sdk to utilize the Analytics component.

To ensure your analytics are configured for your project correctly, we'll need to validate that the Analytics component is being rendered across all AMP templates.

1. Open up amp/app/main.js

2. Validate that the Analytics component is being imported in: import Analytics from 'mobify-amp-sdk/dist/components/analytics'

3. Find the buildAppBody function, and verify that the Analytics component is being rendered. The function should look something like the following code snippet:

import Analytics from 'mobify-amp-sdk/dist/components/analytics

const buildAppBody = (store, component, error) => {

    if (!error) {
        return (
            <Provider store={store}>
                <App templateName={component.templateName}>
                    <AmpInstallServiceWorker src={canonicalURL('/sw.html')} iframeSrc={canonicalURL('/sw.html')} />
                    <Analytics templateName={component.templateName} projectSlug={ampPackageJson.cloudSlug} gaAccount={ampPackageJson.gaAccount} />
                    {ampPackageJson.ampgaAccount !== null &&
                        <Analytics templateName={component.templateName} gaAccount={ampPackageJson.ampgaAccount} />
                    }
                    {React.createElement(component, {}, null)}
                </App>
            </Provider>
        )
    } else {
        return (
            <ErrorContainer>
                <Analytics templateName={component.templateName} projectSlug={ampPackageJson.cloudSlug} gaAccount={ampPackageJson.gaAccount} />
                {ampPackageJson.ampgaAccount !== null &&
                    <Analytics templateName={component.templateName} gaAccount={ampPackageJson.ampgaAccount} />
                }
            </ErrorContainer>
        )
    }
}

Notice in our example above that the Analytics component sets two of its props, projectSlug and gaAccount off of {ampPackageJson.cloudSlug} and {ampPackageJson.gaAccount}. If the cloudSlug and gaAccount fields aren't set in amp/package.json, the Analytics component will not be able to properly configure analytics for AMP.

Now within your project, ensure in amp/package.json that the proper value is defined for the cloudSlug and gaAccount fields. cloudSlug is expecting your projects Cloud slug, while gaAccount is expecting your Google Analytics ID. If you wish to track Google Analytics on a second account, you can set a value for the field ampgaAccount. If you do not see any values set for those fields, go ahead and add those fields and their respective values.

Having the projectSlug prop in the Analytics component set with the appropriate value will set up tracking for Engagement Engine, while having the gaAccount prop set will set up tracking for Google Analytics.

For more examples on usage of the Analytics component, visit our official component documentation.