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.
Open up
amp/app/main.js
Validate that the Analytics component is being imported in:
import Analytics from 'mobify-amp-sdk/dist/components/analytics'
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.