Skip to content

[polaris.shopify.com] Capture search data with google analytics #8602

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
Merged
merged 2 commits into from
Mar 9, 2023
Merged

[polaris.shopify.com] Capture search data with google analytics #8602

merged 2 commits into from
Mar 9, 2023

Conversation

yurm04
Copy link
Contributor

@yurm04 yurm04 commented Mar 8, 2023 •
edited
Loading

📣 Still in draft because I want to figure out how to set up a dev environment in google analytics. I don't think that's necessary for this and I think it will take more time than I want to invest in something that we only need for a week or two but just calling it out.

WHY are these changes introduced?

We want to capture search data for about 2 weeks to help establish a baseline for our search feature on polaris.shopify.com

WHAT is this pull request doing?

  • adding a new utility to the GlobalSearch to send a customSearch event to google analytics
  • customSearch tracks the searchTerm, rank, and selectedResult whenever a user selects a search result or exits the search modal

⚠️ This isn't the DRYest or most sophisticated code... but this is a very limited test we're doing in order to establish a baseline for a future (but not directly related) project. It didn't seem like a good investment to refactor the GlobalSearch for such a small need. I can rip this code out once we get the data we're hoping to capture.

How to 🎩

Test the following scenarios:

  • click on a provided search result
  • use the keyboard to select a search result
  • type out a search query and then exit the modal without selecting any result

For all of these scenarios you need to check the google dataLayer object in the dev console.

selecting a search result should add the searchTerm, rank, and selectedResult to the customSearch object in the dataLay

Screenshot 2023-03-08 at 4 55 00 PM

closing the modal without selecting a result will create an object with rank equal to 0 and an empty selectedResult

Screenshot 2023-03-08 at 4 56 17 PM

🎩 checklist

@yurm04 yurm04 marked this pull request as ready for review March 9, 2023 14:46
@yurm04 yurm04 merged commit 575b351 into main Mar 9, 2023
@yurm04 yurm04 deleted the ye/add-search-tracking branch March 9, 2023 14:48
@shopify-github-actions-access shopify-github-actions-access bot mentioned this pull request Mar 9, 2023
Merged
@yurm04 yurm04 mentioned this pull request Mar 9, 2023
Merged
5 tasks
yurm04 pushed a commit that referenced this pull request Mar 9, 2023
Ye/add google params (#8615)
4aacd19 
<!--
  ☝️How to write a good PR title:
- Prefix it with [ComponentName] (if applicable), for example: [Button]
  - Start with a verb, for example: Add, Delete, Improve, Fix…
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

### WHY are these changes introduced?

Follow up to #8602 to figure out
which event is right

<!--
  Context about the problem that’s being addressed.
-->

### WHAT is this pull request doing?

<!--
  Summary of the changes committed.

Before / after screenshots are appreciated for UI changes. Make sure to
include alt text that describes the screenshot.

If you include an animated gif showing your change, wrapping it in a
details tag is recommended. Gifs usually autoplay, which can cause
accessibility issues for people reviewing your PR:

    <details>
      <summary>Summary of your gif(s)</summary>
      <img src="..." alt="Description of what the gif shows">
    </details>
-->

<!-- ℹ️ Delete the following for small / trivial changes -->

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

<!--
  Give as much information as needed to experiment with the component
  in the playground.
-->

<details>
<summary>Copy-paste this code in
<code>playground/Playground.tsx</code>:</summary>

```jsx
import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}
```

</details>

### 🎩 checklist

- [ ] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [ ] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes
- [ ] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide
alex-page pushed a commit that referenced this pull request Mar 16, 2023
@shopify-github-actions-access @github-actions
Version Packages (#8612)
8542ddc 
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to main, this PR will
be updated.


# Releases
## @shopify/stylelint-polaris@9.0.0

### Major Changes

- [#8657](#8657)
[`764f17d86`](764f17d)
Thanks [@alex-page](https://github.com/alex-page)! - Turn on
reportNeedlessDisables for all comments

## @shopify/polaris-migrator@0.16.0

### Minor Changes

- [#8272](#8272)
[`cccd69848`](cccd698)
Thanks [@lgriffee](https://github.com/lgriffee)! - Create migrations to
replace deprecated custom properties in polaris-react v11.0.0 and v9.0.0

### Patch Changes

- Updated dependencies
\[[`764f17d86`](764f17d)]:
    -   @shopify/stylelint-polaris@9.0.0

## @shopify/polaris@10.36.0

### Minor Changes

- [#8555](#8555)
[`696473b82`](696473b)
Thanks [@clarkjennings](https://github.com/clarkjennings)! - Added a
forward `ref` to permit programmatic scrolling for `Scrollable`
(example: `scrollRef.current?.scrollTo(0)`)


- [#8650](#8650)
[`078cf9aea`](078cf9a)
Thanks [@kyledurand](https://github.com/kyledurand)! - Deprecated
breadcrumbs prop on SkeletonPage, added backAction prop with story


- [#8586](#8586)
[`83bde8690`](83bde86)
Thanks [@tatianau](https://github.com/tatianau)! - Made hiding the
stepper arrows for inputs of type "number" and revealing them on hover
and focus the default `TextField` behaviour to mimic the default browser
experience


- [#8288](#8288)
[`d27a361c2`](d27a361)
Thanks [@rcd00](https://github.com/rcd00)! - Updated the style of
keyboard component and add optional size prop


- [#8600](#8600)
[`515a62f3b`](515a62f)
Thanks [@kyledurand](https://github.com/kyledurand)! - Fixed list reset
class from not applying to ordered lists


- [#8655](#8655)
[`fb373c3e1`](fb373c3)
Thanks [@stewx](https://github.com/stewx)! - Adjust CSS for expanded
navigation section to remove unwanted space during collapse/expand

### Patch Changes

- [#8595](#8595)
[`437a3bbf1`](437a3bb)
Thanks [@KateWood](https://github.com/KateWood)! - Added option zebra
striping to `IndexTable`
([#8595](#8595))


- [#8626](#8626)
[`ff70ab3d1`](ff70ab3)
Thanks [@alex-page](https://github.com/alex-page)! - Fix border radius
on active/pressed navigation items


- [#8644](#8644)
[`62b712362`](62b7123)
Thanks [@alex-page](https://github.com/alex-page)! - Remove unnecessary
stylelint-disable comments


- [#8651](#8651)
[`446ba341c`](446ba34)
Thanks [@aveline](https://github.com/aveline)! - Updated default stack
order custom property


- [#8659](#8659)
[`3e7e0837d`](3e7e083)
Thanks [@mrcthms](https://github.com/mrcthms)! - Removed comments after
stylelint rule changes that are breaking the rules


- [#8606](#8606)
[`230786ace`](230786a)
Thanks [@alex-page](https://github.com/alex-page)! - Remove unused
shared scss functions and move low usage or low value functions into
components


- [#8629](#8629)
[`6ee523a5f`](6ee523a)
Thanks [@mrcthms](https://github.com/mrcthms)! - Updated the animation
duration and box-shadow for the `Tooltip`

## @shopify/polaris-cli@0.1.17

### Patch Changes

- Updated dependencies
\[[`cccd69848`](cccd698)]:
    -   @shopify/polaris-migrator@0.16.0

## polaris.shopify.com@0.39.0

### Minor Changes

- [#8604](#8604)
[`65a678d29`](65a678d)
Thanks [@lgriffee](https://github.com/lgriffee)! - Added a `shadow`
token page


- [#8615](#8615)
[`4aacd1983`](4aacd19)
Thanks [@yurm04](https://github.com/yurm04)! - Added search event that
sets the default google parameters in addition to custom


- [#8613](#8613)
[`1a36ed60c`](1a36ed6)
Thanks [@yurm04](https://github.com/yurm04)! - Added 'engagement'
category to search event


- [#8272](#8272)
[`cccd69848`](cccd698)
Thanks [@lgriffee](https://github.com/lgriffee)! - Create migrations to
replace deprecated custom properties in polaris-react v11.0.0 and v9.0.0

### Patch Changes

- [#8621](#8621)
[`dca759b0b`](dca759b)
Thanks [@jesstelford](https://github.com/jesstelford)! - Fix <Code>
renderer on Patterns pages to support code blocks without meta


- [#8622](#8622)
[`613f637c9`](613f637)
Thanks [@gwyneplaine](https://github.com/gwyneplaine)! - Fix minor
layout bugs in app-settings-layout pattern code example


- [#8379](#8379)
[`c8207636c`](c820763)
Thanks [@nayeobkim](https://github.com/nayeobkim)! - Updated
documentation and guidance for `AlphaCard`, `AlphaStack`, `Box`,
`Bleed`, `Columns`, and `Inline`


- [#8614](#8614)
[`3526fc2fc`](3526fc2)
Thanks [@laurkim](https://github.com/laurkim)! - Added best practices to
`Text`, `AlphaCard`, and `AlphaStack`


- [#8616](#8616)
[`74f0bc42a`](74f0bc4)
Thanks [@kyledurand](https://github.com/kyledurand)! - Fixed icon page
layout


- [#8602](#8602)
[`575b351d5`](575b351)
Thanks [@yurm04](https://github.com/yurm04)! - Added search tracking
using google analytics

- Updated dependencies
\[[`696473b82`](696473b),
[`437a3bbf1`](437a3bb),
[`078cf9aea`](078cf9a),
[`83bde8690`](83bde86),
[`ff70ab3d1`](ff70ab3),
[`62b712362`](62b7123),
[`446ba341c`](446ba34),
[`d27a361c2`](d27a361),
[`3e7e0837d`](3e7e083),
[`230786ace`](230786a),
[`6ee523a5f`](6ee523a),
[`515a62f3b`](515a62f),
[`fb373c3e1`](fb373c3)]:
    -   @shopify/polaris@10.36.0

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
juzser pushed a commit to juzser/polaris that referenced this pull request Jul 27, 2023
@juzser
[polaris.shopify.com] Capture search data with google analytics (Shop…
f01cbea 
…ify#8602)

<!--
  ☝️How to write a good PR title:
- Prefix it with [ComponentName] (if applicable), for example: [Button]
  - Start with a verb, for example: Add, Delete, Improve, Fix…
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

📣 Still in draft because I want to figure out how to set up a dev
environment in google analytics. I don't think that's necessary for this
and I think it will take more time than I want to invest in something
that we only need for a week or two but just calling it out.

### WHY are these changes introduced?

We want to capture search data for about 2 weeks to help establish a
baseline for our search feature on polaris.shopify.com

<!--
  Context about the problem that’s being addressed.
-->

### WHAT is this pull request doing?

* adding a new utility to the GlobalSearch to send a `customSearch`
event to google analytics
* `customSearch` tracks the `searchTerm`, `rank`, and `selectedResult`
whenever a user selects a search result or exits the search modal

⚠️ This isn't the DRYest or most sophisticated code... but this is a
very limited test we're doing in order to establish a baseline for a
future (but not directly related) project. It didn't seem like a good
investment to refactor the GlobalSearch for such a small need. I can rip
this code out once we get the data we're hoping to capture.

<!-- ℹ️ Delete the following for small / trivial changes -->

### How to 🎩
Test the following scenarios:
* click on a provided search result
* use the keyboard to select a search result
* type out a search query and then exit the modal without selecting any
result

For all of these scenarios you need to check the google `dataLayer`
object in the dev console.

selecting a search result should add the `searchTerm`, `rank`, and
`selectedResult` to the `customSearch` object in the `dataLay`

<img width="438" alt="Screenshot 2023-03-08 at 4 55 00 PM"
src="https://user-images.githubusercontent.com/4642404/223869996-95876d42-4052-439f-ac50-8e44a52e3a24.png">

closing the modal without selecting a result will create an object with
`rank` equal to `0` and an empty `selectedResult`

<img width="228" alt="Screenshot 2023-03-08 at 4 56 17 PM"
src="https://user-images.githubusercontent.com/4642404/223870206-f4c80202-e19f-4c90-b989-2f5f02849097.png">


### 🎩 checklist

- [ ] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [ ] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes
- [ ] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide
juzser pushed a commit to juzser/polaris that referenced this pull request Jul 27, 2023
@juzser
Ye/add google params (Shopify#8615)
64061b3 
<!--
  ☝️How to write a good PR title:
- Prefix it with [ComponentName] (if applicable), for example: [Button]
  - Start with a verb, for example: Add, Delete, Improve, Fix…
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

### WHY are these changes introduced?

Follow up to Shopify#8602 to figure out
which event is right

<!--
  Context about the problem that’s being addressed.
-->

### WHAT is this pull request doing?

<!--
  Summary of the changes committed.

Before / after screenshots are appreciated for UI changes. Make sure to
include alt text that describes the screenshot.

If you include an animated gif showing your change, wrapping it in a
details tag is recommended. Gifs usually autoplay, which can cause
accessibility issues for people reviewing your PR:

    <details>
      <summary>Summary of your gif(s)</summary>
      <img src="..." alt="Description of what the gif shows">
    </details>
-->

<!-- ℹ️ Delete the following for small / trivial changes -->

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

<!--
  Give as much information as needed to experiment with the component
  in the playground.
-->

<details>
<summary>Copy-paste this code in
<code>playground/Playground.tsx</code>:</summary>

```jsx
import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}
```

</details>

### 🎩 checklist

- [ ] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [ ] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes
- [ ] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide
juzser pushed a commit to juzser/polaris that referenced this pull request Jul 27, 2023
@shopify-github-actions-access @github-actions @juzser
Version Packages (Shopify#8612)
706563f 
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to main, this PR will
be updated.


# Releases
## @shopify/stylelint-polaris@9.0.0

### Major Changes

- [Shopify#8657](Shopify#8657)
[`764f17d86`](Shopify@764f17d)
Thanks [@alex-page](https://github.com/alex-page)! - Turn on
reportNeedlessDisables for all comments

## @shopify/polaris-migrator@0.16.0

### Minor Changes

- [Shopify#8272](Shopify#8272)
[`cccd69848`](Shopify@cccd698)
Thanks [@lgriffee](https://github.com/lgriffee)! - Create migrations to
replace deprecated custom properties in polaris-react v11.0.0 and v9.0.0

### Patch Changes

- Updated dependencies
\[[`764f17d86`](Shopify@764f17d)]:
    -   @shopify/stylelint-polaris@9.0.0

## @shopify/polaris@10.36.0

### Minor Changes

- [Shopify#8555](Shopify#8555)
[`696473b82`](Shopify@696473b)
Thanks [@clarkjennings](https://github.com/clarkjennings)! - Added a
forward `ref` to permit programmatic scrolling for `Scrollable`
(example: `scrollRef.current?.scrollTo(0)`)


- [Shopify#8650](Shopify#8650)
[`078cf9aea`](Shopify@078cf9a)
Thanks [@kyledurand](https://github.com/kyledurand)! - Deprecated
breadcrumbs prop on SkeletonPage, added backAction prop with story


- [Shopify#8586](Shopify#8586)
[`83bde8690`](Shopify@83bde86)
Thanks [@tatianau](https://github.com/tatianau)! - Made hiding the
stepper arrows for inputs of type "number" and revealing them on hover
and focus the default `TextField` behaviour to mimic the default browser
experience


- [Shopify#8288](Shopify#8288)
[`d27a361c2`](Shopify@d27a361)
Thanks [@rcd00](https://github.com/rcd00)! - Updated the style of
keyboard component and add optional size prop


- [Shopify#8600](Shopify#8600)
[`515a62f3b`](Shopify@515a62f)
Thanks [@kyledurand](https://github.com/kyledurand)! - Fixed list reset
class from not applying to ordered lists


- [Shopify#8655](Shopify#8655)
[`fb373c3e1`](Shopify@fb373c3)
Thanks [@stewx](https://github.com/stewx)! - Adjust CSS for expanded
navigation section to remove unwanted space during collapse/expand

### Patch Changes

- [Shopify#8595](Shopify#8595)
[`437a3bbf1`](Shopify@437a3bb)
Thanks [@KateWood](https://github.com/KateWood)! - Added option zebra
striping to `IndexTable`
([Shopify#8595](Shopify#8595))


- [Shopify#8626](Shopify#8626)
[`ff70ab3d1`](Shopify@ff70ab3)
Thanks [@alex-page](https://github.com/alex-page)! - Fix border radius
on active/pressed navigation items


- [Shopify#8644](Shopify#8644)
[`62b712362`](Shopify@62b7123)
Thanks [@alex-page](https://github.com/alex-page)! - Remove unnecessary
stylelint-disable comments


- [Shopify#8651](Shopify#8651)
[`446ba341c`](Shopify@446ba34)
Thanks [@aveline](https://github.com/aveline)! - Updated default stack
order custom property


- [Shopify#8659](Shopify#8659)
[`3e7e0837d`](Shopify@3e7e083)
Thanks [@mrcthms](https://github.com/mrcthms)! - Removed comments after
stylelint rule changes that are breaking the rules


- [Shopify#8606](Shopify#8606)
[`230786ace`](Shopify@230786a)
Thanks [@alex-page](https://github.com/alex-page)! - Remove unused
shared scss functions and move low usage or low value functions into
components


- [Shopify#8629](Shopify#8629)
[`6ee523a5f`](Shopify@6ee523a)
Thanks [@mrcthms](https://github.com/mrcthms)! - Updated the animation
duration and box-shadow for the `Tooltip`

## @shopify/polaris-cli@0.1.17

### Patch Changes

- Updated dependencies
\[[`cccd69848`](Shopify@cccd698)]:
    -   @shopify/polaris-migrator@0.16.0

## polaris.shopify.com@0.39.0

### Minor Changes

- [Shopify#8604](Shopify#8604)
[`65a678d29`](Shopify@65a678d)
Thanks [@lgriffee](https://github.com/lgriffee)! - Added a `shadow`
token page


- [Shopify#8615](Shopify#8615)
[`4aacd1983`](Shopify@4aacd19)
Thanks [@yurm04](https://github.com/yurm04)! - Added search event that
sets the default google parameters in addition to custom


- [Shopify#8613](Shopify#8613)
[`1a36ed60c`](Shopify@1a36ed6)
Thanks [@yurm04](https://github.com/yurm04)! - Added 'engagement'
category to search event


- [Shopify#8272](Shopify#8272)
[`cccd69848`](Shopify@cccd698)
Thanks [@lgriffee](https://github.com/lgriffee)! - Create migrations to
replace deprecated custom properties in polaris-react v11.0.0 and v9.0.0

### Patch Changes

- [Shopify#8621](Shopify#8621)
[`dca759b0b`](Shopify@dca759b)
Thanks [@jesstelford](https://github.com/jesstelford)! - Fix <Code>
renderer on Patterns pages to support code blocks without meta


- [Shopify#8622](Shopify#8622)
[`613f637c9`](Shopify@613f637)
Thanks [@gwyneplaine](https://github.com/gwyneplaine)! - Fix minor
layout bugs in app-settings-layout pattern code example


- [Shopify#8379](Shopify#8379)
[`c8207636c`](Shopify@c820763)
Thanks [@nayeobkim](https://github.com/nayeobkim)! - Updated
documentation and guidance for `AlphaCard`, `AlphaStack`, `Box`,
`Bleed`, `Columns`, and `Inline`


- [Shopify#8614](Shopify#8614)
[`3526fc2fc`](Shopify@3526fc2)
Thanks [@laurkim](https://github.com/laurkim)! - Added best practices to
`Text`, `AlphaCard`, and `AlphaStack`


- [Shopify#8616](Shopify#8616)
[`74f0bc42a`](Shopify@74f0bc4)
Thanks [@kyledurand](https://github.com/kyledurand)! - Fixed icon page
layout


- [Shopify#8602](Shopify#8602)
[`575b351d5`](Shopify@575b351)
Thanks [@yurm04](https://github.com/yurm04)! - Added search tracking
using google analytics

- Updated dependencies
\[[`696473b82`](Shopify@696473b),
[`437a3bbf1`](Shopify@437a3bb),
[`078cf9aea`](Shopify@078cf9a),
[`83bde8690`](Shopify@83bde86),
[`ff70ab3d1`](Shopify@ff70ab3),
[`62b712362`](Shopify@62b7123),
[`446ba341c`](Shopify@446ba34),
[`d27a361c2`](Shopify@d27a361),
[`3e7e0837d`](Shopify@3e7e083),
[`230786ace`](Shopify@230786a),
[`6ee523a5f`](Shopify@6ee523a),
[`515a62f3b`](Shopify@515a62f),
[`fb373c3e1`](Shopify@fb373c3)]:
    -   @shopify/polaris@10.36.0

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@alex-page alex-page Awaiting requested review from alex-page

@chazdean chazdean Awaiting requested review from chazdean

1 more reviewer

@martenbjork martenbjork martenbjork approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@yurm04 @martenbjork