diff --git a/blog.config.js b/blog.config.js index cea45845..216d925c 100644 --- a/blog.config.js +++ b/blog.config.js @@ -310,9 +310,9 @@ const BLOG = { ANALYTICS_GOOGLE_ID: process.env.NEXT_PUBLIC_ANALYTICS_GOOGLE_ID || '', // 谷歌Analytics的id e.g: G-XXXXXXXXXX // ACKEE网站访客统计工具 - ANALYTICS_ACKEE_TRACKER: process.env.NEXT_PUBLIC_ANALYTICS_ACKEE_TRACKER || 'https://cdn.jsdelivr.net/npm/ackee-tracker@5.1.0/dist/ackee-tracker.min.js', // e.g 'https://ackee.tangly1024.net/tracker.js' - ANALYTICS_ACKEE_DATA_SERVER: process.env.NEXT_PUBLIC_ANALYTICS_ACKEE_DATA_SERVER || '', // e.g https://ackee.tangly1024.net , don't end with a slash - ANALYTICS_ACKEE_DOMAIN_ID: process.env.NEXT_PUBLIC_ANALYTICS_ACKEE_DOMAIN_ID || '', // e.g '0e2257a8-54d4-4847-91a1-0311ea48cc7b' + ANALYTICS_ACKEE_TRACKER: process.env.NEXT_PUBLIC_ANALYTICS_ACKEE_TRACKER || '', // e.g 'https://ackee.tangly1024.com/tracker.js' + ANALYTICS_ACKEE_DATA_SERVER: process.env.NEXT_PUBLIC_ANALYTICS_ACKEE_DATA_SERVER || '', // e.g https://ackee.tangly1024.com , don't end with a slash + ANALYTICS_ACKEE_DOMAIN_ID: process.env.NEXT_PUBLIC_ANALYTICS_ACKEE_DOMAIN_ID || '', // e.g '82e51db6-dec2-423a-b7c9-b4ff7ebb3302' SEO_GOOGLE_SITE_VERIFICATION: process.env.NEXT_PUBLIC_SEO_GOOGLE_SITE_VERIFICATION || '', // Remove the value or replace it with your own google site verification code diff --git a/components/Ackee.js b/components/Ackee.js index 0be74ecd..63b47037 100644 --- a/components/Ackee.js +++ b/components/Ackee.js @@ -1,29 +1,64 @@ -// import { useRouter } from 'next/router' +'use strict' + +import { useEffect } from 'react' import BLOG from '@/blog.config' import { loadExternalResource } from '@/lib/utils' -import { useEffect } from 'react' +import { useRouter } from 'next/router' const Ackee = () => { + const router = useRouter() useEffect(() => { - loadExternalResource(BLOG.ANALYTICS_ACKEE_TRACKER, 'js').then(url => { - const ackeeTracker = window.ackeeTracker - console.log('ackeeTracker', ackeeTracker) - }) - }) + handleAckee( + router.asPath, + { + server: BLOG.ANALYTICS_ACKEE_DATA_SERVER, + domainId: BLOG.ANALYTICS_ACKEE_DOMAIN_ID + }, + { + detailed: false, + ignoreLocalhost: false + } + ) + }, [router]) - // const router = useRouter() - // useAckee( - // router.asPath, - // { - // server: BLOG.ANALYTICS_ACKEE_DATA_SERVER, - // domainId: BLOG.ANALYTICS_ACKEE_DOMAIN_ID - // }, - // { - // detailed: false, - // ignoreLocalhost: true - // } - // ) return null } export default Ackee + +/** + * Function to use Ackee. + * Creates an instance once and a new record every time the pathname changes. + * Safely no-ops during server-side rendering. + * @param {?String} pathname - Current path. + * @param {Object} environment - Object containing the URL of the Ackee server and the domain id. + * @param {?Object} options - Ackee options. + */ +const handleAckee = async function(pathname, environment, options = {}) { + await loadExternalResource(BLOG.ANALYTICS_ACKEE_TRACKER, 'js') + const ackeeTracker = window.ackeeTracker + + const instance = ackeeTracker.create(environment.server, options) + + if (instance == null) { + console.warn('Skipped record creation because useAckee has been called in a non-browser environment') + return + } + + const hasPathname = ( + pathname != null && pathname !== '' + ) + + if (hasPathname === false) { + console.warn('Skipped record creation because useAckee has been called without pathname') + return + } + + const attributes = ackeeTracker.attributes(options.detailed) + const url = new URL(pathname, location) + + return instance.record(environment.domainId, { + ...attributes, + siteLocation: url.href + }).stop +}