Branching - Advanced Customization

How to ensure a viewer watches all choices. Tracking viewer paths. Triggering actions.

Written by Patrick Farley Updated over a week ago

Friendly Warning: welcome to developer territory.

You will have a lot of fun if you are comfortable with HTML, Javascript and CSS, or have a friend / colleague that is. If not, you may have a bad time.

If you are a real do-it-yourselfer and want to learn yourself, we highly recommend first taking Codeacademy's free HTML/CSS and JavaScript courses.

Ensuring Viewer Watches all Choices

Works for: In-Video Branching

If you are creating in-video branching you may want to ensure that viewers watch all choices from a particular choice screen to continue in the video. Here's how you can do that.

This technique assumes a standard branching experience where a viewer sees a choice screen, clicks on a specific "choice" annotation, watches the choice part of the video and then is automatically sent back or manually clicks back to the choice screen to select another choice.

Start by adding a chapter annotation to the choice screen and the start of every choice segment of the video.

At the start of the first choice segment add an On Time Annotation. Go to Link / Advanced / JavaScript. Enter choice_1_1 = true .

At the start of each subsequent choice section add another On Time Annotation. Go to Link / Advanced / JavaScript. Enter similar variables: choice_1_2 = true for the second choice, choice_1_3 = true for the third choice, and so on.

Add another On Time Annotation at the same start time as the choice annotations. Set the action that will happen once the viewer clicks all of the choices (for example "Jump to video time" to the closing section of the video. )

Set the Display Rule for that to be for example choice_1_1 && choice_1_2 && choice_1_3. Make sure to include the variable for each of the choices. This annotation is the key. It stays hidden until the viewer has viewed each choice, then it displays, and the next time the viewer reaches the choice screen, the on time action triggers automatically.

Tracking Viewers and Triggering Actions

You can use this information to trigger an action (for example: release a gate, display an annotation or not, etc...) based on some viewing pattern (i.e. watched at-least 3 branches, watched branch 2, etc...)

Trigger an Action

You can now trigger an action. For example, stop displaying an annotation after a user views a number of branches.

In this example this particular iframe annotation prevents the viewer from viewing the ending by jumping to a specified time (in this case 10 seconds, the beginning of the first branch point). Once two branches are viewed, this annotation will no longer be active.

Add an iframe annotation.

Set the Start Time to the beginning of the section you want to prevent the viewer from watching. In this case, the Ending.

Please Note: this is a Proof of Concept only provided to show the possibilities of the HapYak Platform and should not be taken as an offer to create, edit or maintain custom integration or development.