Google Analytics updated configuration

.changeset/slow-keys-confess.md

@@ -0,0 +1,5 @@
+---
+'@gitbook/integration-googleanalytics': minor
+---
+
+Update Google Analytics integration configuration

integrations/googleanalytics/gitbook-manifest.yaml

@@ -13,8 +13,6 @@ script: ./src/index.ts
 # The following scope(s) are available only to GitBook Staff
 # See https://developer.gitbook.com/integrations/configurations#scopes
 scopes:
-    - space:script:inject
-    - space:script:cookies
     - site:script:inject
     - site:script:cookies
 contentSecurityPolicy:
@@ -53,10 +51,4 @@ categories:
     - analytics
 configurations:
     site:
-        properties:
-            tracking_id:
-                type: string
-                title: Tracking ID
-                description: Look for this in your Google Analytics account.
-        required:
-            - tracking_id
+        componentId: config

integrations/googleanalytics/src/components.tsx

@@ -0,0 +1,83 @@
+import { createComponent, RuntimeContext, RuntimeEnvironment } from '@gitbook/runtime';
+
+type GARuntimeEnvironment = RuntimeEnvironment<{}, GASiteInstallationConfiguration>;
+
+type GARuntimeContext = RuntimeContext<GARuntimeEnvironment>;
+
+type GASiteInstallationConfiguration = {
+    tracking_id?: string;
+};
+
+type GAState = GASiteInstallationConfiguration;
+
+type GAProps = {
+    siteInstallation: {
+        configuration?: GASiteInstallationConfiguration;
+    };
+};
+
+export type GAAction = { action: 'save.config' };
+
+export const configBlock = createComponent<GAProps, GAState, GAAction, GARuntimeContext>({
+    componentId: 'config',
+    initialState: (props) => {
+        const siteInstallation = props.siteInstallation;
+        return {
+            tracking_id: siteInstallation.configuration?.tracking_id ?? '',
+        };
+    },
+    action: async (element, action, context) => {
+        switch (action.action) {
+            case 'save.config':
+                const { api, environment } = context;
+                const siteInstallation = environment.siteInstallation;
+                if (!siteInstallation) {
+                    throw Error('No site installation found');
+                }
+
+                const configurationBody = {
+                    ...siteInstallation.configuration,
+                    tracking_id: element.state.tracking_id,
+                };
+                await api.integrations.updateIntegrationSiteInstallation(
+                    siteInstallation.integration,
+                    siteInstallation.installation,
+                    siteInstallation.site,
+                    {
+                        configuration: {
+                            ...configurationBody,
+                        },
+                    },
+                );
+                return element;
+        }
+    },
+    render: async () => {
+        return (
+            <configuration>
+                <input
+                    label="Client ID"
+                    hint={<text>The unique identifier of your GA app client.</text>}
+                    element={<textinput state="tracking_id" placeholder="Tracking ID" />}
+                />
+
+                <divider />
+                <input
+                    label=""
+                    hint=""
+                    element={
+                        <button
+                            style="primary"
+                            disabled={false}
+                            label="Save"
+                            tooltip="Save configuration"
+                            onPress={{
+                                action: 'save.config',
+                            }}
+                        />
+                    }
+                />
+            </configuration>
+        );
+    },
+});

integrations/googleanalytics/src/index.ts

@@ -5,6 +5,7 @@ import {
     RuntimeEnvironment,
 } from '@gitbook/runtime';
 
+import { configBlock } from './components';
 import script from './script.raw.js';
 
 type GARuntimeContext = RuntimeContext<
@@ -35,4 +36,5 @@ export const handleFetchEvent: FetchPublishScriptEventCallback = async (
 
 export default createIntegration<GARuntimeContext>({
     fetch_published_script: handleFetchEvent,
+    components: [configBlock],
 });