I am currently using the code below to track pageviews on my AMP accelerated pages on a WordPress website:
{
"vars": {
"account": "UA-12345678-1"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
I have just implemented infinite scroll on single pages and i need the next-page to be tracked on scroll or click also. I found the below code on the official "amp.dev" page:
<amp-analytics>
<script type="application/json">
{
"requests": {
"nextpage": "https://example.com/pixel?RANDOM&toURL=${toURL}"
},
"triggers": {
"trackScrollThrough": {
"on": "amp-next-page-scroll",
"request": "nextpage"
},
"trackClickThrough": {
"on": "amp-next-page-click",
"request": "nextpage"
}
}
}
</script>
</amp-analytics>
How can I combine both codes into one such that it can track both pageviews and the infinite scroll (both on-click and on-scroll)
I managed to find a work-around, i added the code below in my footer and it works:
<amp-analytics id="11e2c333333a" type="googleanalytics">
<script type="application/json">
{
"requests": {
"nextpage": "<?php get_permalink(get_the_ID()); ?>?amp"
},
"vars": {
"account": "UA-12345678-1"
},
"triggers": {
"trackScrollThrough": {
"on": "amp-next-page-scroll",
"request": "nextpage"
},
"trackClickThrough": {
"on": "amp-next-page-click",
"request": "nextpage"
},
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
Related
I am trying to fire an event after submit success in AMP.
At the moment I use dataLayer.push() and sending: category, action and label.
How do i fire the success event with the example from this documentation https://amp.dev/documentation/components/amp-form/#analytics-triggers
This the code form the documentation:
<amp-analytics>
<script type="application/json">
{
"requests": {
"event": "https://www.example.com/analytics/event?eid=${eventId}",
"searchEvent": "https://www.example.com/analytics/search?formId=${formId}&query=${formFields[query]}"
},
"triggers": {
"formSubmit": {
"on": "amp-form-submit",
"request": "searchEvent"
},
"formSubmitSuccess": {
"on": "amp-form-submit-success",
"request": "event",
"vars": {
"eventId": "form-submit-success"
}
},
"formSubmitError": {
"on": "amp-form-submit-error",
"request": "event",
"vars": {
"eventId": "form-submit-error"
}
}
}
}
</script>
</amp-analytics>
The selector is missing - AMP has to know about which form element this is
Additional data can be passed as vars. E.g. for Google Analytics, it's event_label, event_name, and event_category. More on AMP & GA integration here.
…
"formSubmit": {
"on": "amp-form-submit-success",
"selector": "form",
"request": "event",
"vars": {
"event_label": "Label 1"
}
},
…
I’m using native mode
How can I change the code below to the AMP version?
onclick="gtag('event','Click to call',{'event_category':'Call tracking','event_label':'Mobile header'});"
<script type="application/json">
{
"vars": {
"gtag_id": "<GA_TRACKING_ID>",
"config": {
"<GA_TRACKING_ID>": {}
}
},
"triggers": {
"button": {
"selector": "#the-button",
"on": "click",
"vars": {
"event_name": "login",
"method": "Google",
"event_category": "Call tracking",
"event_label": "Mobile header"
}
}
}
}
</script>
Documentation: https://developers.google.com/analytics/devguides/collection/amp-analytics/#complete_example
Hi everyone I am trying to track a form on an AMP website.
I have already tried to track the visibility of the success message via GTM
and is not working
apparently form the documentation the event tracking on AMP is done by this
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
"vars": {
"gtag_id": "<GA_TRACKING_ID>",
"config": {
"<GA_TRACKING_ID>": { "groups": "default" }
}
},
"triggers": {
"button": {
"selector": "#the-button",
"on": "click",
"vars": {
"event_name": "login",
"method": "Google"
}
}
}
}
</script>
</amp-analytics>
I have tried to use it in this way:
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
"vars": {
"gtag_id": "UA-48872168-2",
"config": {
"UA-48872168-2": { "groups": "default" }
}
},
"triggers": {
"form": {
"selector": "#contact-form",
"on": "submit-sucess",
"vars": {
"event_name": "CATEGORIA",
"method": "AZIONE"
}
}
}
}
</script>
</amp-analytics>
and is not tracking: any ideas?
Thank you in advance
This used to work before but now when I add the following code snippet, from the Google Analytics AMP integration page, it does not make a network collect call for Google analytics https://developers.google.com/analytics/devguides/collection/amp-analytics/#extending_googleanalytics
<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
"requests": {
"pageviewWithCd1Cd3": "${pageview}&cd1=${cd1}&cd3=${cd3}"
},
"vars": {
"account": "UA-XXXXX-Y"
},
"triggers": {
"trackPageviewWithCustom" : {
"on": "visible",
"request": "pageviewWithCd1Cd3",
"vars": {
"title": "Classic Cars",
"cd1": "registeredUser",
"cd3": "automotive"
}
}
}
}
</script>
</amp-analytics>
I replaced the account with a real account starting with UA
I also have the analytics script tag included in the head tag:
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
The pageview does fire a request to collect but the cd1 and cd3 do not get included in the query params nor does the values of cd1 and cd3 get passed in the query params of the URL.
Have others noticed this same issue starting November 17th onwards?
You can follow the related github thread on the Chrome error here: https://github.com/ampproject/amphtml/issues/6740#issuecomment-268119523
If somebody ends up here looking for solution how to send custom dimensions for AMP, that's what finally worked for me:
<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
"vars": {
"account": "UA-XXX-XXXX"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview",
"extraUrlParams": {
"cd1": "dimension1Value",
"cd2": "dimansion2Value"
}
}
}
}
</script>
</amp-analytics>
Documentation link
This worked for me - using dp=${newPageName} where 'newPageName' is custom url
<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
"requests": {
"pageviewWithCustomPageCd1Cd3": "${pageview}&dp=${newPageName}"
},
"vars": {
"account": "UA-XXXXX-Y"
},
"triggers": {
"trackPageviewWithCustom" : {
"on": "visible",
"request": "pageviewWithCustomPageCd1Cd3",
"vars": {
"title": "Classic Cars",
"cd1": "registeredUser",
"cd3": "automotive",
"newPageName": "sample.html?amp=1&cd1=${cd1}&cd3=${cd3}"
}
}
}
}
</script>
</amp-analytics>
Is there a way to add different Google Analytics tracking accounts? I've been looking around but I only find examples and sites are using 1 single account:
<script type="application/json">
{
"requests": {
"pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}",
"event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
},
"vars": {
"account": "ABC123"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
},...
You can copy paste the amp-analytics tag twice. Or you can use use two triggers. Here are some examples:
Two separate tags:
<amp-analytics>
<script type="application/json">
{
"vars": {
"account": "ABC123"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
},...
<amp-analytics>
<script type="application/json">
{
"vars": {
"account": "PQR987"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
},...
Two triggers:
<amp-analytics>
<script type="application/json">
{
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
"vars": {
"account": "ABC123"
},
},
"trackPageview2": {
"on": "visible",
"request": "pageview"
"vars": {
"account": "PQR987"
},
},...
We're just missing a comma after "request": "pageview"
<amp-analytics type="googleanalytics" id="analytics-ga">
<script type="application/json">
{
"triggers": {
"trackPageviewAmp": {
"on": "visible",
"request": "pageview",
"vars": {
"account": "UA-000000-2"
}
}
},
"triggers": {
"trackPageviewMain": {
"on": "visible",
"request": "pageview",
"vars": {
"account": "UA-000000-1"
}
}
}
}
</script>
</amp-analytics>
In the AMPforWP (Wordpress), Google Analytics, Advanced Google Analytics plugin, the "JSON" format is requested. By inserting in this format only triggers work, triggers2 will not.