Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor(plugin-gtag): update gtag plugin to modern SPA recommendations #8143

Merged
merged 14 commits into from
Oct 21, 2022
Merged

refactor(plugin-gtag): update gtag plugin to modern SPA recommendations #8143

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
2382178
Adding GA hook. Need help exporting it.
Sep 27, 2022
9ea3476
Fixed and working
Sep 28, 2022
e3b9137
Merge branch 'facebook:main' into main
lanegoolsby Sep 28, 2022
cda7b8a
Derp
Sep 28, 2022
961966e
PR Feedback
Oct 3, 2022
b4780e2
Getting rid of local registry
Oct 3, 2022
1631f43
Adding if case for when in develop mode
Oct 3, 2022
1bd3edf
Reverting yarn.lock to fix tests
Oct 3, 2022
bd0683e
Auto-format to kick a new build
Oct 4, 2022
88e9407
Backing out abstraction
Oct 19, 2022
6d49f61
Derp
Oct 19, 2022
3cb8773
Removing a somewhat useless comment in order to kick the build
Oct 19, 2022
8ce5d72
Update packages/docusaurus-plugin-google-gtag/src/types.d.ts
slorber Oct 21, 2022
be36601
better google analytics types integration
slorber Oct 21, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/docusaurus-plugin-google-gtag/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
"@docusaurus/core": "^3.0.0-alpha.0",
"@docusaurus/types": "^3.0.0-alpha.0",
"@docusaurus/utils-validation": "^3.0.0-alpha.0",
"@types/gtag.js": "^0.0.12",
"tslib": "^2.4.0"
},
"peerDependencies": {
Expand Down
11 changes: 6 additions & 5 deletions packages/docusaurus-plugin-google-gtag/src/gtag.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,12 @@ const clientModule: ClientModule = {
setTimeout(() => {
// Always refer to the variable on window in case it gets overridden
// elsewhere.
window.gtag('event', 'page_view', {
page_title: document.title,
page_location: window.location.href,
page_path: location.pathname + location.search + location.hash,
});
window.gtag(
lanegoolsby marked this conversation as resolved.
Show resolved Hide resolved
'set',
'page_path',
location.pathname + location.search + location.hash,
);
slorber marked this conversation as resolved.
Show resolved Hide resolved
window.gtag('event', 'page_view');
});
}
},
Expand Down
12 changes: 0 additions & 12 deletions packages/docusaurus-plugin-google-gtag/src/types.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,3 @@
*/

/// <reference types="@docusaurus/module-type-aliases" />

interface Window {
gtag: (
command: string,
fields: string,
params: {
page_title?: string;
page_location?: string;
page_path?: string;
},
) => void;
}
Comment on lines -10 to -20
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

note: this type is only used internally, and is not exposed by the gtag package, so it shouldn't affect anyone.

36 changes: 36 additions & 0 deletions website/_dogfooding/_pages tests/analytics.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/

import React from 'react';
import Layout from '@theme/Layout';

// See https://github.com/facebook/docusaurus/issues/6337#issuecomment-1012913647
export default function Analytics(): JSX.Element {
return (
<Layout>
<h1>Test Analytics</h1>
<div>
<button
type="button"
onClick={() => {
window.gtag('event', 'docusaurus-test-event', {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

side note: it doesn't work in dev/deploy-preview because we don't load gtag script there

We should probably expose a gtag | undefined instead of just gtag, to make it clear that user has to program defensively against this api

event_category: 'docusaurus-test-event-category"',
event_label: 'docusaurus-test-event-label',
});

const FALSE = false; // I don't want gtag to run with bad params
if (FALSE) {
// @ts-expect-error: gtag usage is type safe, failure expected
window.gtag('this-does-not-exist');
}
}}>
Submit custom gtag event!
</button>
</div>
</Layout>
);
}
1 change: 1 addition & 0 deletions website/_dogfooding/_pages tests/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,3 +30,4 @@ import Readme from "../README.md"
- [Tabs tests](/tests/pages/tabs-tests)
- [z-index tests](/tests/pages/z-index-tests)
- [Head metadata tests](/tests/pages/head-metadata)
- [Analytics](/tests/pages/analytics)
1 change: 1 addition & 0 deletions website/src/types.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,4 @@
*/

/// <reference types="@docusaurus/plugin-ideal-image" />
/// <reference types="@types/gtag.js" />
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

not very satisfied with this setup atm, as it puts the burden to the site owner to reference the appropriate packages, but good enough to move on

What I wish is to have the type auto reference itself if the preset-classic is installed (since it contains the gtag plugin, even though it might be disabled).

I'd like to have references: preset => plugin gtag => @types/gtag.js

For now, if I add such a ref in index.ts, it gets stripped out from the .d.ts file, unfortunately.

@Josh-Cena I'll merge as it it but if you have any idea to make that site ref un-necessary that would be cool.

5 changes: 5 additions & 0 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3524,6 +3524,11 @@
dependencies:
"@types/node" "*"

"@types/gtag.js@^0.0.12":
version "0.0.12"
resolved "https://registry.yarnpkg.com/@types/gtag.js/-/gtag.js-0.0.12.tgz#095122edca896689bdfcdd73b057e23064d23572"
integrity sha512-YQV9bUsemkzG81Ea295/nF/5GijnD2Af7QhEofh7xu+kvCN6RdodgNwwGWXB5GMI3NoyvQo0odNctoH/qLMIpg==

"@types/hast@^2.0.0":
version "2.3.4"
resolved "https://registry.yarnpkg.com/@types/hast/-/hast-2.3.4.tgz#8aa5ef92c117d20d974a82bdfb6a648b08c0bafc"
Expand Down