docsify
docsify copied to clipboard
docsifyjs
feat: add google analytics gtag.js plugin
Summary
Google Universal Analytics (gtag.js) plugin, usage is the same as src/plugins/ga.js
What kind of change does this PR introduce?
Feature
For any code change,
- [ ] Related documentation has been updated if needed
- [ ] Related tests have been updated or tests have been added
Does this PR introduce a breaking change? (check one)
- [ ] Yes
- [ ] No
If yes, please describe the impact and migration path for existing applications:
Related issue, if any:
#1695
Tested in the following browsers:
- [x] Chrome
- [ ] Firefox
- [ ] Safari
- [ ] Edge
- [ ] IE
This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.
🔍 Inspect: https://vercel.com/docsify-core/docsify-preview/42cj1nPMt4MNgraowyET4t8gHDEe
✅ Preview: https://docsify-preview-git-fork-ekoz-develop-docsify-core.vercel.app
![vercel[bot] avatar](https://avatars.githubusercontent.com/in/8329?v=4 "Published by a pub.dev verified publisher"){kind=small}
This pull request is automatically built and testable in CodeSandbox.
To see build info of the built libraries, click here or the icon next to each commit SHA.
Latest deployment of this branch, based on commit 6a3bd84a07d9a50e0dc3beb5cb67890ca3dd5fe8:
| Sandbox | Source |
|---|---|
| docsify-template | Configuration |
![codesandbox-ci[bot] avatar](https://avatars.githubusercontent.com/in/38409?v=4 "Published by a pub.dev verified publisher"){kind=small}
Nice, thanks! Can you add a similar doc section as GA? Also it needs lint fix.
@trusktr Hi, I update this merge request again, pls check it when you are free, thanks ~
@trusktr Hi, there is an error, ci/codesandbox — Building packages failed., Is there anything I can do?
Hi @ekoz. Checking in to see if/when the requested changes can be made so we can move forward with this PR.
Thanks!
@jhildenbiddle I want to design $docsify.ga to support both strings and arrays, but there are relatively few data for Google ads and floodlight. Can the current version only support GA3 and GA4?
After we support arrays, if the user passes in multiple G-, such as [G-111, G-222, G-333], do we need to support them? This problem does not exist in the case of string.
@ekoz --
It is my understanding that the only thing required to support multiple properties ("G-", "AW-", "DC-", ...) or multiple identifiers for the same property ("G-XX1", "G-XX2", ...) is to render a separate gtag() statement for each:
// GA3
gtag('config', 'UA-XXXXXXXX');
// Multiple GA4
gtag('config', 'G-XXXXXXX1');
gtag('config', 'G-XXXXXXX2');
// Other Services
gtag('config', 'AW-XXXXXXXX');
gtag('config', 'DC-XXXXXXXX');
This is based on the following documentation:
- https://developers.google.com/tag-platform/gtagjs/install
- https://developers.google.com/analytics/devguides/collection/gtagjs/#configure_additional_google_analytics_properties
So the implementation should be simple: just iterate over the array of IDs and render a gtag('${id}') for each.
It's worth nothing that this post on StackOverflow seems to imply that this method of supporting multiple IDs for the same service does not always work. I can't verify this, but since but since Google's official documentation states that it this is how it is supposed to work, I think we're okay just rendering a gtag() for each ID and calling it a wrap.
@jhildenbiddle Hi, The idea you pointed out should be achievable, and the first ID in arrays must be a global site tag id, each page should have only one global site tag instance.
The latest updates on your projects. Learn more about Vercel for Git ↗︎
| Name | Status | Preview | Comments | Updated (UTC) |
|---|---|---|---|---|
| docsify-preview | ✅ Ready (Inspect) | Visit Preview | 💬 Add feedback | Jun 27, 2023 2:27am |
Just wanted to pop in and say thanks for this update. Much appreciated. I have a ga3 and GA4 property that I can test with if necessary 👍
One other request: Please add tests for the plugin. Basic tests that verify that the script is being added to the DOM properly, that IDs match, and that the gtag calls are being made as expected is all we need.
Thanks @ekoz!
@jhildenbiddle I use an HTML page under docsify directory to test
<html>
<head>
<title>ga test</title>
<link rel="stylesheet" href="lib/themes/vue.css" />
</head>
<body>
<div id="app"></div>
<script>
window.$docsify = {
// ga: [
// 'AW-XXXXXXXX', // Google Ads
// 'DC-XXXXXXXX', // Floodlight
// 'G-XXXXXXXX', // Google Analytics 4 (GA4)
// 'UA-XXXXXXXX', // Google Universal Analytics (GA3)
// ],
};
</script>
<script src="lib/docsify.min.js" data-ga="G-XXXXXXXX"></script>
<script src="lib/plugins/ga.min.js"></script>
</body>
</html>
@ekoz --
I use an HTML page under docsify directory to test
I was referring to an automated test within our /test/ directory. If you need help with this, I'm happy to lend a hand.
@jhildenbiddle thanks, I read the docs https://playwright.dev/docs and have a try, run with npm run test:e2e ga.test.js.
How to test data-ga with playwright?
