diff --git a/extensions/amp-story/1.0/amp-story.js b/extensions/amp-story/1.0/amp-story.js index 1d07a90f9ba7..b4c94eab1a31 100644 --- a/extensions/amp-story/1.0/amp-story.js +++ b/extensions/amp-story/1.0/amp-story.js @@ -689,6 +689,20 @@ export class AmpStory extends AMP.BaseElement { false /** callToInitialize */ ); + this.storeService_.subscribe( + StateProperty.CAPTIONS_STATE, + (captionsState) => { + // We do not want to trigger an analytics event for the initialization of + // the captions state. + this.analyticsService_.triggerEvent( + captionsState + ? StoryAnalyticsEvent.STORY_CAPTIONS_ON + : StoryAnalyticsEvent.STORY_CAPTIONS_OFF + ); + }, + false /** callToInitialize */ + ); + this.storeService_.subscribe(StateProperty.ADVANCEMENT_MODE, (mode) => { this.variableService_.onVariableUpdate( AnalyticsVariable.STORY_ADVANCEMENT_MODE, diff --git a/extensions/amp-story/1.0/story-analytics.js b/extensions/amp-story/1.0/story-analytics.js index d2eafc752365..eb1540cf77d1 100644 --- a/extensions/amp-story/1.0/story-analytics.js +++ b/extensions/amp-story/1.0/story-analytics.js @@ -27,6 +27,8 @@ export const StoryAnalyticsEvent = { STORY_CONTENT_LOADED: 'story-content-loaded', STORY_MUTED: 'story-audio-muted', STORY_UNMUTED: 'story-audio-unmuted', + STORY_CAPTIONS_ON: 'story-captions-on', + STORY_CAPTIONS_OFF: 'story-captions-off', SHOPPING_BUY_NOW_CLICK: 'story-shopping-buy-now-click', SHOPPING_PLP_VIEW: 'story-shopping-plp-view', SHOPPING_PDP_VIEW: 'story-shopping-pdp-view', diff --git a/extensions/amp-story/1.0/test/test-amp-story.js b/extensions/amp-story/1.0/test/test-amp-story.js index 27a1b5a7b721..22cacb0a22d6 100644 --- a/extensions/amp-story/1.0/test/test-amp-story.js +++ b/extensions/amp-story/1.0/test/test-amp-story.js @@ -34,7 +34,7 @@ import { } from '../amp-story-store-service'; import {EventType, dispatch} from '../events'; import {MediaType_Enum} from '../media-pool'; -import {AdvancementMode} from '../story-analytics'; +import {AdvancementMode, StoryAnalyticsEvent} from '../story-analytics'; import * as utils from '../utils'; // Represents the correct value of KeyboardEvent.which for the Right Arrow @@ -995,6 +995,27 @@ describes.realWin( expect(story.element.hasAttribute('muted')).to.be.true; }); + it('should trigger analytics event on captions toggle', async () => { + await createStoryWithPages(2, ['cover', 'page-1']); + + const triggerSpy = env.sandbox.spy( + story.analyticsService_, + 'triggerEvent' + ); + + await story.layoutCallback(); + + story.storeService_.dispatch(Action.TOGGLE_CAPTIONS, false); + expect(triggerSpy).to.have.been.calledWith( + StoryAnalyticsEvent.STORY_CAPTIONS_OFF + ); + + story.storeService_.dispatch(Action.TOGGLE_CAPTIONS, true); + expect(triggerSpy).to.have.been.calledWith( + StoryAnalyticsEvent.STORY_CAPTIONS_ON + ); + }); + describe('#getMaxMediaElementCounts', () => { it('should create 2 audio & video elements when no elements found', async () => { await createStoryWithPages(2, ['cover', 'page-1']); diff --git a/extensions/amp-story/amp-story-analytics.md b/extensions/amp-story/amp-story-analytics.md index 90ebd2ccd80a..f5f8806410f3 100644 --- a/extensions/amp-story/amp-story-analytics.md +++ b/extensions/amp-story/amp-story-analytics.md @@ -145,6 +145,14 @@ The `story-audio-muted` trigger is fired when the user initiates an interaction The `story-audio-unmuted` trigger is fired when the user initiates an interaction to unmute the audio for the current story. +### Captions on trigger (`"on": "story-captions-on"`) + +The `story-captions-on` trigger is fired when the user initiates an interaction to turn captions on for the current story. + +### Captions off trigger (`"on": "story-captions-off"`) + +The `story-captions-off` trigger is fired when the user initiates an interaction to turn captions off for the current story. + ### Page attachment enter trigger (`"on": "story-page-attachment-enter"`) The `story-page-attachment-enter` trigger is fired when a page attachment is opened by the user.