• Priority: 0
  • Status: Closed
  • Theme: Alysum
  • Assigned To: Fred
  • Private: No
  • Open Date: 03.06.21, 18:09
  • Opened by: Riccardo Sala
  • Closed by: Anonymous Submitter
  • Closed on:
  • Reason: Not a bug

Ticket #21619 - AMP Google Analytics Ecommerce data

Hello,

It looks the tracking is working correctly for navigation, but eCommerce data from AMP pages is not working.

Today We have received two order, both not tracked.

By analysing visited page I can state for sure, both order has come from Mobile version.

What’s wrong in my configuration?

Comments

Fred 04 Jun 2021, 10:57

Hi, Riccardo Sala.
AMP require it own analytics configuration
Did you configured your google account according to the tutorials here?
https://developers.google.com/analytics/devguides/collection/amp-analytics/

https://www.youtube.com/watch?v=QXu-z9mz0z8

Riccardo Sala 04 Jun 2021, 13:08

Haven’t you embedded events directly on the code?

I thought adding the property in theme AMP settings was already configured to send events, and not only page view

Fred 04 Jun 2021, 14:41

We have added only basic events for google analytics (gtag).
You can see that in the file /themes/alysum/templates/mobile/_partials/footer-bottom.tpl

Riccardo Sala 04 Jun 2021, 14:44

So, all implementation is required?

Have you prepared something to import in Google Tag Manager?

Fred 04 Jun 2021, 15:09

Google Tag Manager has external config, you just need to add into your google tag ID in to the AMP settings.
The config will be taken remotely with the link

https://www.googletagmanager.com/amp.json?id=GTM-NR5D3W6&gtm.url=SOURCE_URL
Riccardo Sala 04 Jun 2021, 15:11

Can you provide custom Paid implementation?

Fred 04 Jun 2021, 15:13

But implementation of what? If you want to connect tag manager, just put your ID into the AMP settings

Riccardo Sala 07 Jun 2021, 09:40

Already done, but only pageview are recorded.

Ecommerce data and events (like add to cart, remove from cart, begin checkout, purchase and purchase amount) are missing.

Fred 07 Jun 2021, 18:30

I just added events for Add to cart button and an event to Payment confirmation button into the file 

/public_html/themes/alysum/templates/mobile/_partials/footer-bottom.tpl

Please check it out and modify it as you need.

Riccardo Sala 07 Jun 2021, 18:32

And what about ecommerce order amount?

Fred 07 Jun 2021, 18:40

I didn’t find an example/tutorial how to add that

Riccardo Sala 08 Jun 2021, 14:37

I’ve found this interesting guide.

You can find some example of json and how to implement.

It should be a great improvement for your theme.

https://www.tagmanageritalia.it/come-tracciare-le-commerce-avanzato-eec-di-google-analytics-nelle-pagine-amp/#gref

<script async custom-element=”amp-analytics” src=”https://cdn.ampproject.org/v0/amp-analytics-0.1.js“></script>
<amp-analytics type=”googleanalytics”>
<script type=”application/json”>
{ 

"vars": { 
   "account":"UA-XXXXX-Y" 
 }, 
 "triggers":{ 
   "trackPageview":{ 
     "on":"visible", 
     "request":"pageview", 
     "vars":{ 
       "title":"Name of the Article" 
     }, 
     "extraUrlParams":{ 
       "il1nm":"Search Results",                  // list or search results 
       "il1pi1id":"12345",                        // product #1 id 
       "il1pi1nm":"Triblend Android T-Shirt",     // product #1 name 
       "il1pi1ca":"Apparel",                      // product #1 category
       "il1pi1br":"Google",                       // product #1 brand
       "il1pi1pr":"15.25",                        // product #1 price
       "il1pi1va":"Gray",                         // product #1 variant
       "il1pi1ps":"1",                            // product #1 position
       "il1pi2id":"67890",                        // product #2 id 
       "il1pi2nm":"Donut Friday Scented T-Shirt", // product #2 name 
       "il1pi2ca":"Apparel",                      // product #2 category
       "il1pi2br":"Google",                       // product #2 brand
       "il1pi2pr":"33.75",                        // product #2 price
       "il1pi2va":"Black",                        // product #2 variant 
       "il1pi2ps":"2"                             // product #2 position 
     } 
   } 
 }

}
</script>
</amp-analytics>

Fred 09 Jun 2021, 11:32

Thank you for the suggestion.
Do you want to have these extra parameters for the “pageview” event?

Riccardo Sala 09 Jun 2021, 16:16

As you can see in the guide at link https://www.tagmanageritalia.it/come-tracciare-le-commerce-avanzato-eec-di-google-analytics-nelle-pagine-amp/#gref

It’s possibile to implement ecommerce data by using extraparameters

I hope you can translate/read the page I’ve linked to perform the implementation

Ecommerce data tracking is fundamental for optimizing Google Ads campaigns.

Fred 11 Jun 2021, 16:35

So we prepared following config with extra params:

<amp-analytics type="gtag" data-credentials="include">
  <script type="application/json">
    {
      "vars": {
        "gtag_id": "{$amp.config.general.googleanalytics.id}",
        "config": {
          "{$amp.config.general.googleanalytics.id}": {
            "groups": "default"
          }
        }
      },
      "triggers": {
        "trackPageview": {
          "on": "visible",
          "request": "pageview",
          "extraUrlParams": {
            "page_name": "{$amppage}",
            "currency": "{$currency.iso_code}",
            "language": "{$language.iso_code}"
            {if $amppage == 'category'}
            ,"category_id" : {$category.id}
            ,"category_name" : {$category.name}
            {/if}{if $amppage == 'product'}
            ,"product_name": "{$product.name}"
            ,"product_id": "{$product.id}"
            ,"product_category": "{$product.category_name}"
            ,"value": "{$product.price_amount}"
            {/if}
          }
        }
      }
    }
  </script>
</amp-analytics>