Add a bar that advertises the community survey #397
Conversation
The `survey-ad` control is shown at the bottom of every page. If you click almost anywhere in the bar, the survey landing page will open in a new tab/window. At the far right of the bar, there’s a close button that will animate the bar out of view and store the current time in localStorage. When the page first loads, we check for the presence of that localStorage item to decide whether the bar should be shown or not. The bar is only enabled for desktop (1000px+ wide) screens. The only bug I’ve found is when you use search while the bar is still present; in that situation, you can see all of the search results, but the scroll bar goes under the bar. I don’t think that’s a blocker. This is related to canjs/canjs#3548
static/survey-ad.js
Outdated
| var didClose = window.localStorage.getItem(storageKey); | ||
| if (didClose) { | ||
| // Immediately hide this element | ||
| surveyAdElement.style.display = 'none'; |
There was a problem hiding this comment.
Have you considered hiding by default and showing if needed?
There was a problem hiding this comment.
Yeah, I would rather have the link be shown when JS is disabled or localStorage is unavailable than hide it in those cases.
| var surveyAdElement = this.element; | ||
|
|
||
| // Always show the close button since JS is active | ||
| var closeButton = surveyAdElement.querySelector('.close'); |
There was a problem hiding this comment.
Props for avoiding jQuery 👏
static/survey-ad.js
Outdated
| '{element} .close click': function() { | ||
|
|
||
| // Add .hidden so the element animates out of view | ||
| this.element.classList.add('hidden'); |
There was a problem hiding this comment.
Does this still get triggered in IE? If so, classList.add would throw, right?
There was a problem hiding this comment.
The close button is hidden by default and only enabled if line 11 can run, so this event will never fire in IE9.
static/survey-ad.less
Outdated
| text-align: center; | ||
| transition: bottom @transition-speed ease; | ||
| width: 100%; | ||
| z-index: 90; |
There was a problem hiding this comment.
Is 90 really needed? I don't doubt it, just curious.
There was a problem hiding this comment.
Yeah, this is the same z-index as #right; if I change the code I can update it with a note about where this value comes from.
|
It takes up a lot of space, especially by it going over the sidebar. Can we make it a little less obtrusive?
|
|
Alternatively, we could put in between the
|
|
I don’t think it takes up that much space and it’s the right amount of attention grabbing, but talking through our options:
I think if it’s more integrated into the design, it’s less obtrusive and people are less likely to be annoyed by it, so if they don’t want to sign up the first time they see it, they’d be willing to let it be and come back to it later. |
After the user visits CanJS.com for the first time, we count any additional page loads (across sessions) as “engagements.” After three engagements, we show them the survey-ad. This shifts the control to showing unless dismissed to only showing if they have JS enabled and have interacted with the site a few times.
|
@justinbmeyer, as we discussed this morning, I changed the control to hide by default and only show after the user loads a few pages. |
The
survey-adcontrol is shown at the bottom of every page. If you click almost anywhere in the bar, the survey landing page will open in a new tab/window.At the far right of the bar, there’s a close button that will animate the bar out of view and store the current time in localStorage. When the page first loads, we check for the presence of that localStorage item to decide whether the bar should be shown or not.
The bar is only enabled for desktop (1000px+ wide) screens. The only bug I’ve found is when you use search while the bar is still present; in that situation, you can see all of the search results, but the scroll bar goes under the bar. I don’t think that’s a blocker.
Screenshot:
Gif showing how it interacts with the rest of the content & sidebar:
