I am trying to follow the example in:
https://developers.google.com/web/tools/workbox/modules/workbox-google-analytics
I set up a Google analytics account, and then created a PWA using https://codelabs.developers.google.com/codelabs/workbox-lab/#0.
The PWA from the lab works as expected.
Then I created a custom dimension (dimension1) and a custom metric (metric1) in google analytics. When I send the dimension and metric in code on page load it shows up in the Google analytics reports.
ga('create', 'UA-125355230-1', 'auto');
//ga('send', 'event', 'category', 'action', { 'metric1': 100 });
ga('set', 'dimension1', 'online');
ga('send', 'pageview');
Then in the sw.js (the service worker js), I added the following code, as it says in the tutorial:
workbox.googleAnalytics.initialize({
parameterOverrides: {
dimension1: 'offline',
},
hitFilter: (params) => {
const queueTimeInSeconds = Math.round(params.get('qt') / 1000);
params.set('metric1', queueTimeInSeconds);
},
});
I stopped the app, and refreshed the index.html a few times. I brought the app back online and tried to sync the service worker by using the queue name workbox-background-sync:workbox-google-analytics.
This triggers the background plugin code, but it does not find anything to send.
Same results when I tried to make the network offline in devtools.
In debugger the createRequestWillReplayCallback of workbox-google-analytics.dev.js is called initially, but the replayRequests of workbox-background-sync.dev.js which is called when I try syncing seems to not find anything to replay.
During sync the
workbox-background-sync - http://localhost:8081
is created in indexedDB, but the queueName under requests seem to be empty:
What am I missing? Any pointers or help to get the offline analytics working with Workbox and test PWA is appreciated.
Related
Currently I am working on a Capacitor 4 app using VUE. To know which sections are used most I want to add Google or Firebase Analytics.
In the browser and Android everything works fine, however on iOS it doesn't. I tried 6 different solutions and now kinda out of options. My guess is that it has something todo with the Capacitor webview not being allowed to call Google/Firebase analytics or can set cookies.
Another issue could be that Capacitor serves the app from localhost. That would clarify why analytics is working when I add:
server: {
url: 'http://192.168.0.16:3333',
cleartext: true,
},
To the capacitor.config.ts since it then is not server from localhost but from an ip.
I was wondering if anyone has experienced the same (and might know a solution)
Solutions tried without any working outcome on iOS
1. Added extra consent flags to avoid using cookies
from: Disabling cookies in Google Analytics - gtag.js
gtag("consent", "default", {
ad_storage: "denied",
analytics_storage: "denied",
})
2. Added client_storage: "none",
gtag("config", "%VITE_APP_GOOGLE_TAG_MANAGER_TRACKING_ID%", {
send_page_view: false,
anonymize_ip: true,
client_storage: "none",
})
3. From https://github.com/ionic-team/capacitor/issues/1433#issuecomment-631404089
// allow capacitor:// as protocol
gtag('set', 'checkProtocolTask', function () { /* nothing */ });
4. Going back to analytics.js
ga("set", {
// don't abort if the protocol is not http(s)
checkProtocolTask: null,
// don't expect cookies to be enabled
checkStorageTask: null,
})
5. Firebase Analytics - Capacitor
https://github.com/capacitor-community/firebase-analytics Not maintained anymore since 25 Januari 2011
6. Firebase Analytics - Web
Used the web package for Firebase Analytics https://firebase.google.com/docs/reference/js/analytics
I'm using the Google Analytics's gtag.js on a single-page webapp (SPA). As suggested in the docs for SPAs, I've disabled the automatic send_page_view and instead explicitly send a page view by setting a page_path and page_title to the gtag config. So far, so good.
The docs also list an optional page_location parameter to send the page's full URL. For my app's search page, I'm particularly interested in getting the full query params after the ? in the URL, so I tried adding it to that payload:
gtag('config', GA_TRACKING_ID, {
page_location: window.location.href,
page_title: 'app search page',
page_path: '/search',
});
However I never see a full URL in either the Anlaytics web UI or in its export to BigQuery. I only the page_title and page_path. Where does page_location end up getting stored or reported?
page_location is not reported in Analytics but might be used for processing source and medium parameters and for extracting page_path if not provided.
I have developed a website using gatsby and I am using google analytics plugin via gatsby-plugin-google-analytics, now to be nice with the users, I would like to add a cookie consent where the user will be two options whether to accept or decline cookies usages. If the user declines then I would like to stop google analytics to track the user activity. I dug into their documentation but unable to find the option to achieve this, is there any way around to achieve this.
{
resolve: `gatsby-plugin-google-analytics`,
options: {
trackingId: siteConfig.googleAnalyticsId,
// Defines where to place the tracking script - `true` in the head and `false` in the body
head: false,
},
},
For the movement my gatsby-config.js looks like this. how one can achieve this.
Thanks you in advance.
The plugin merely loads the library and instruments page tracking calls in a Gatsby-compatible way for you. All of the other Google Analytics calls, including disabling measurement for a user works the same as normal.
It's up to you to:
Build and show a cookie notice with an opt-out
Remember when a user has opted out
Communicate this on each page-load for the user (before any ga() calls are made) by setting window['ga-disable-UA-XXXXX-Y'] = true
You should be able to do this in a function exported as onClientEntry from gatsby-browser.js. For example:
export const onClientEntry = () => {
if (userHasOptedOutOfThirdPartyTracking()) {
window[`ga-disable-${process.env.GATSBY_GOOGLE_ANALYTICS_ID`] = true
}
}
For the Gatsby website, you could use a combination of gatsby-plugin-gdpr-cookies for analytics cookies management in your gatsby-config.js and react-cookie-consent to display the cookie banner.
# using npm
npm install --save gatsby-plugin-gdpr-cookies react-cookie-consent
# using yarn
yarn add gatsby-plugin-gdpr-cookies react-cookie-consent
You can find a more detailed tutorial here.
I need to display 'Pure HTML Dashboards' or 'Custom Components' as depicted in the following link https://ga-dev-tools.appspot.com/demos/embed-api/
I have google analytics account & it shows me the real time statistics perfectly for my website, but i need to display the same using the api as shown in the following link:
https://github.com/googleanalytics/embed-api-demos/blob/master/site/3-custom-components.html
I have replaced my client id in the following code:
gapi.analytics.auth.authorize({
container: 'auth',
clientid: '623325626209-j1jm9d78ge0v4uf8b9cor31qsirungrq.apps.googleusercontent.com',
});
I also updated the end date to current date as follows:
query: {
'metrics': 'ga:sessions',
'dimensions': 'ga:date',
'start-date': '30daysAgo',
'end-date': '2014-09-05'
},
So when i run the code it shows a button "Access Google Analytics", when i click on it i get the following error:
That’s an error.
Error: origin_mismatch
Application: Project Default Service Account
You can email the developer of this application at: fz1990#gmail.com
Request Details
=
scope=https://www.googleapis.com/auth/analytics.readonly https://www.googleapis.com/auth/userinfo.email
response_type=code token id_token gsession
redirect_uri=postmessage
cookie_policy=single_host_origin
proxy=oauth2relay591552393
state=524099008|0.3938720987
origin=http://localhost:27363
include_granted_scopes=true
client_id=656169223314-dbc8l4c7ro20hn8vcqqtd9rhd0e6arcb.apps.googleuserconte
Can somebody plss help me to fix this issue?
Thanx in advance
Origin mismatch is normally caused by the Javascript origins not being set correctly in the API project console. You need to make sure that the Javascript origins match the domain from which your requests are coming and to which you are returning the user after sign in.
In your case you are still using the client_id from the tutorial you need to create your own. More details can be found in the developer documentation for the embeded API in the "Create a client ID and client secret" section.
Basilcy you need to go to Google Developer console and register your application. The link above to the documentation will walk you though creating that. Hint: don't for get to add a product name and email address.
At this time the Real-time API is still in beta you will need to apply for access to it. Real time reporting api private beta fill out that form you wont hear anything from Google just wait 24 hours and give it a try it normally works by then.
With Universal analytics, what are the best practices in sending/testing data to a test profile?
I've included the tracking snippet before the </head> and the following:
window['ga-disable-UA-XXXXXXXX-X'] = true;
ga('create', 'UA-XXXXXXXX-X', {
'cookieDomain': 'none'
});
ga('send', 'pageview');
I'll usually handle this by always keeping the same code in production vs staging (aka remove the ga-disable and cookieDomain lines of your code snippet). I then create 2-5 different views in Google Analytics and filter them as:
Default (include only production domains - eg: regex ^(www\.)?example\.com$)
Raw Data (no filters)
Test Site (inlude only test domains - eg: exact test.example.com)
Staging Site (include only test domains - eg: exact staging.example.com)
Admin Site (include only admin domain - eg: exact admin.example.com)
Under Profile >> Filters there are predefined filters and custom filters. Use a predefined include Traffic to the Domain for all of the above.