Shopify analytics (#108)

* working shopify analytics * add to cart analytics * workign all events * file renames * file paths * lint * lint * fix nextjs app lint * fix nextjs app lint * test for schemas * lint test * fix nextjs app * add analytic-utils tests and refactor (#117) * add analytic-utils tests and refactor * fix name * fix test * add test for coverage * fix no product payload test * @juanpprieto/fix-failing-tests (#120) * add support for parsing complex gids and fix failing test * shorten cond checks * remove incorrect complex id parsing * fix typo * sendShopifyAnalytics tests * better test naming * lint * some PR feedbacks * more PR feedbacks * lint * more test * more test * better name test * @juanpprieto/cookie util test (#121) * fix lint complains * fix weird ts complain * fix format * clean up constants * convert ShopifyCookie to a hook * ts clean up * ts clean up * more ts clean up * more feedback * update ShopPayButton * make sure monorail endpoint can be updated to the shop domain alternative * mock failed response * add doc * prettier * ci browser different? * return explicit type * see if this works * fix type prettier * fix package path * full cookie test * prettier * move shopify cookie constants back into cart constant * missed a return type * Update .changeset/plenty-moles-listen.md Co-authored-by: Anthony Frehner <frehner@users.noreply.github.com> * remove console log * update exposed methods, constants, and types * prettier * fix file name * fix file name again * Small updates Co-authored-by: Juan P. Prieto <jp@calltheguys.co> Co-authored-by: Anthony Frehner <frehner@users.noreply.github.com>
Shopify · Jan 18, 2023 · 16b6b81 · 16b6b81
1 parent 2ea046f
commit 16b6b81
Show file tree

Hide file tree

Showing 28 changed files with 2,648 additions and 32 deletions.
diff --git a/.changeset/plenty-moles-listen.md b/.changeset/plenty-moles-listen.md
@@ -0,0 +1,30 @@
+---
+'@shopify/storefront-kit-react': patch
+---
+
+Shopify Analytics
+
+Methods:
+
+- `useShopifyCookies(hasUserConsent = true, domain = ''): void` - sets and refreshes Shopify cookies
+- `getShopifyCookie(cookieString: string): ShopifyCookie` - returns Shopify cookies
+- `sendShopifyAnalytics({eventName: AnalyticsEventName, payload: ShopifyAnalytics}, domain?): Promise<void>` - sends Shopify analytics
+- `getClientBrowserParameters(): ClientBrowserParameters` - returns commonly tracked client browser values
+
+Constants:
+
+- `AnalyticsEventName` - list of Shopify accepted analytics events
+- `AnalyticsPageType` - list of Shopify accepted page type names
+- `ShopifyAppSource` - list of Shopify accepted application source
+
+Types:
+
+- `ShopifyCookies`
+- `ClientBrowserParameters`
+- `ShopifyAnalytics` - generic type for `ShopifyPageView` and `ShopifyAddToCart`
+- `ShopifyAnalyticsPayload` - generic type for `ShopifyPageViewPayload` and `ShopifyAddToCartPayload`
+- `ShopifyPageView`
+- `ShopifyPageViewPayload`
+- `ShopifyAddToCart`
+- `ShopifyAddToCartPayload`
+- `ShopifyAnalyticsProduct`
diff --git a/apps/nextjs/gql/fragment-masking.ts b/apps/nextjs/gql/fragment-masking.ts
@@ -1,4 +1,4 @@
-import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+import { TypedDocumentNode as DocumentNode, ResultOf } from '@graphql-typed-document-node/core';
 
 
 export type FragmentType<TDocumentType extends DocumentNode<any, any>> = TDocumentType extends DocumentNode<
@@ -38,3 +38,11 @@ export function useFragment<TType>(
 ): TType | ReadonlyArray<TType> | null | undefined {
   return fragmentType as any
 }
+
+
+export function makeFragmentData<
+  F extends DocumentNode,
+  FT extends ResultOf<F>
+>(data: FT, _fragment: F): FragmentType<F> {
+  return data as FragmentType<F>;
+}
diff --git a/apps/nextjs/gql/gql.ts b/apps/nextjs/gql/gql.ts
@@ -2,13 +2,54 @@
 import * as types from './graphql';
 import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
 
+/**
+ * Map of all GraphQL operations in the project.
+ *
+ * This map has several performance disadvantages:
+ * 1. It is not tree-shakeable, so it will include all operations in the project.
+ * 2. It is not minifiable, so the string of a GraphQL query will be multiple times inside the bundle.
+ * 3. It does not support dead code elimination, so it will add unused operations.
+ *
+ * Therefore it is highly recommended to use the babel-plugin for production.
+ */
 const documents = {
+    "\n  query Collection($handle: String!) {\n    collection(handle: $handle) {\n      id\n      handle\n      title\n      description\n    }\n  }\n": types.CollectionDocument,
     "\n  query IndexQuery {\n    shop {\n      name\n    }\n    products(first: 1) {\n      nodes {\n        # if you uncomment 'blah', it should have a GraphQL validation error in your IDE if you have a GraphQL plugin. It should also give an error during 'npm run dev'\n        # blah\n        id\n        title\n        publishedAt\n        handle\n        variants(first: 1) {\n          nodes {\n            id\n            image {\n              url\n              altText\n              width\n              height\n            }\n          }\n        }\n      }\n    }\n  }\n": types.IndexQueryDocument,
+    "\n  query Product {\n    shop {\n      name\n    }\n    products(first: 1) {\n      nodes {\n        # if you uncomment 'blah', it should have a GraphQL validation error in your IDE if you have a GraphQL plugin. It should also give an error during 'npm run dev'\n        # blah\n        id\n        title\n        vendor\n        publishedAt\n        handle\n        variants(first: 1) {\n          nodes {\n            id\n            title\n            price {\n              amount\n            }\n            image {\n              url\n              altText\n              width\n              height\n            }\n          }\n        }\n      }\n    }\n  }\n": types.ProductDocument,
+    "\n  query Search($searchTerm: String) {\n    products(first: 1, sortKey: RELEVANCE, query: $searchTerm) {\n      pageInfo {\n        startCursor\n        endCursor\n        hasNextPage\n        hasPreviousPage\n      }\n    }\n  }\n": types.SearchDocument,
 };
 
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n  query Collection($handle: String!) {\n    collection(handle: $handle) {\n      id\n      handle\n      title\n      description\n    }\n  }\n"): (typeof documents)["\n  query Collection($handle: String!) {\n    collection(handle: $handle) {\n      id\n      handle\n      title\n      description\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
 export function graphql(source: "\n  query IndexQuery {\n    shop {\n      name\n    }\n    products(first: 1) {\n      nodes {\n        # if you uncomment 'blah', it should have a GraphQL validation error in your IDE if you have a GraphQL plugin. It should also give an error during 'npm run dev'\n        # blah\n        id\n        title\n        publishedAt\n        handle\n        variants(first: 1) {\n          nodes {\n            id\n            image {\n              url\n              altText\n              width\n              height\n            }\n          }\n        }\n      }\n    }\n  }\n"): (typeof documents)["\n  query IndexQuery {\n    shop {\n      name\n    }\n    products(first: 1) {\n      nodes {\n        # if you uncomment 'blah', it should have a GraphQL validation error in your IDE if you have a GraphQL plugin. It should also give an error during 'npm run dev'\n        # blah\n        id\n        title\n        publishedAt\n        handle\n        variants(first: 1) {\n          nodes {\n            id\n            image {\n              url\n              altText\n              width\n              height\n            }\n          }\n        }\n      }\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n  query Product {\n    shop {\n      name\n    }\n    products(first: 1) {\n      nodes {\n        # if you uncomment 'blah', it should have a GraphQL validation error in your IDE if you have a GraphQL plugin. It should also give an error during 'npm run dev'\n        # blah\n        id\n        title\n        vendor\n        publishedAt\n        handle\n        variants(first: 1) {\n          nodes {\n            id\n            title\n            price {\n              amount\n            }\n            image {\n              url\n              altText\n              width\n              height\n            }\n          }\n        }\n      }\n    }\n  }\n"): (typeof documents)["\n  query Product {\n    shop {\n      name\n    }\n    products(first: 1) {\n      nodes {\n        # if you uncomment 'blah', it should have a GraphQL validation error in your IDE if you have a GraphQL plugin. It should also give an error during 'npm run dev'\n        # blah\n        id\n        title\n        vendor\n        publishedAt\n        handle\n        variants(first: 1) {\n          nodes {\n            id\n            title\n            price {\n              amount\n            }\n            image {\n              url\n              altText\n              width\n              height\n            }\n          }\n        }\n      }\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(source: "\n  query Search($searchTerm: String) {\n    products(first: 1, sortKey: RELEVANCE, query: $searchTerm) {\n      pageInfo {\n        startCursor\n        endCursor\n        hasNextPage\n        hasPreviousPage\n      }\n    }\n  }\n"): (typeof documents)["\n  query Search($searchTerm: String) {\n    products(first: 1, sortKey: RELEVANCE, query: $searchTerm) {\n      pageInfo {\n        startCursor\n        endCursor\n        hasNextPage\n        hasPreviousPage\n      }\n    }\n  }\n"];
 
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ *
+ *
+ * @example
+ * ```ts
+ * const query = gql(`query GetUser($id: ID!) { user(id: $id) { name } }`);
+ * ```
+ *
+ * The query argument is unknown!
+ * Please regenerate the types.
+**/
 export function graphql(source: string): unknown;
+
 export function graphql(source: string) {
   return (documents as any)[source] ?? {};
 }