Implementing google analytics in shopify public app

mkarthique
New Member
12 0 0

We have a shopify embedded public app(An embedded app is rendered inside iframe) created using node , next js and react js.
We have requirement the google analytics in our application.

We are the facing the following problems when implementing the same
1. Custom events not being send to the Google Analytics on triggering from the component level.
We are not getting any console errors and call is reaching the analytics library and is not
send from there.
2. Sometimes when the page is refreshed and reloaded, The active users in GA dashboard appears to be zero.


I am using the gtag.js implementation and the below is the code snippet:

gtag('event''test', {
        'event_category': 'test category',
        'event_label': 'g4 shopify'
    });
0 Likes
RajatWeb
Shopify Partner
187 42 56

Hi @mkarthique,

Did you try with React-ga - https://www.npmjs.com/package/react-ga 

Check this tutorial - https://medium.com/@austintoddj/using-google-analytics-with-next-js-423ea2d16a98

Please let me know if this resolve your issue.

Thanks

 

If helpful then please Like and ✔️ Accept Solution.
Do you need custom changes on store ? please send me a personal message and we can discuss.
Email: rajatsharma.web@gmail.com
Skype: rajatsharma.web
0 Likes
madefresh
New Member
5 0 0

I'm having the exact same issue. Did you manage to find a solution to this?

0 Likes
madefresh
New Member
5 0 0

Hi. Are you sure it is possible to use Google analytics within a shopify embedded app?

I have tried so many solutions and nothing seems to work. E.g.

https://www.npmjs.com/package/react-ga 

https://github.com/Shopify/quilt/blob/main/packages/react-google-analytics/README.md

 

To me, it seems because the parent domain is different than my embedded app domain, it doesn't work, probably due to browser security issues.

 

If I go directly to my public app URL with the shopify origin parameter present, and fire an event on load, it does register in Google Analytics.

 

But, because of the way embedded apps work, they (after about 2 secs) forceably redirect back to https://[mystore].myshopify.com/admin/apps/[my-public-app]

 

No events or page views are registered from this point onwards.

 

Thanks 

 

0 Likes
Shaibt
Excursionist
18 1 12

One possible source for these types of problems are 3rd party tracking limitations imposed by browsers because the embedded app is inside an iframe that has a different origin than the main Shopify admin page.

GA tries to persist session and user data in your embedded app - which browsers would consider 3rd party tracking and would block. I would try enabling the GA debugger chrome extension to see if this is the case.

The solution would be to tell GA not to persist anything in local storage by using the `client_storage` init option:

let initOptions = {}
if (window.self !== window.top) {     
        initOptions['client_storage'] = 'none';
}

gtag('config',TRACKING_ID, initOptions);

 

This has the obvious downside of losing ability to track users across sessions but should get your events working.

0 Likes
madefresh
New Member
5 0 0

Thanks, you were 100% right.

 

I ended up going with the https://www.npmjs.com/package/react-ga solution, but initializing it with the following settings:

 

 

  ReactGA.initialize(GA_TRACKING_ID, {
      debug: false,
      gaOptions: {
          storage: 'none',
          storeGac: false,
      }
  });

 

0 Likes