如何在牧羊人中添加自定义功能

Question

如何在牧羊人的下一个按钮上添加自定义功能？我需要在牧羊人弹出框中添加GA事件，但无法找到如何在单击next按钮上添加事件，请有人帮助。

export const builtInButtons = {
  cancel: {
    classes: 'btn-purple-bg me-2 mt-2 sfpro-regular sepheredDone',
    secondary: true,
    text: '<span class="button-text">Done</span>',
    type: 'cancel',
  },
  next: {
    classes: 'btn-purple-bg me-2 mt-2 sfpro-regular',
    text: '<span class="button-text">Next</span>',
    type: 'next',
    
  },
  back: {
    classes: 'btn-purple-bg me-2 mt-2 sfpro-regular',
    secondary: true,
    text: '<span class="button-text">Previous</span>',
    type: 'back',
  },
  stepOne: {
    classes: 'sfpro-regular me-2 mt-2 sepheredStep',
    secondary: true,
    text: '<span type="text" class="sfpro-regular opacity-90 fs-14px ls-28 m-sm-2 ">1 of 6</span>',
  },
  stepTwo: {
    classes: 'sfpro-regular me-2 mt-2 sepheredStep',
    secondary: true,
    text: '<span type="text" class="sfpro-regular opacity-90 fs-14px ls-28 m-sm-2 ">2 of 6</span>',
    type: 'back',
  },
  stepThree: {
    classes: 'sfpro-regular me-2 mt-2 sepheredStep',
    secondary: true,
    text: '<span type="text" class="sfpro-regular opacity-90 fs-14px ls-28 m-sm-2 ">3 of 6</span>',
    type: 'back',
  },
  stepFour: {
    classes: 'sfpro-regular me-2 mt-2 sepheredStep',
    secondary: true,
    text: '<span type="text" class="sfpro-regular opacity-90 fs-14px ls-28 m-sm-2 ">4 of 6</span>',
    type: 'back',
  },
  stepFive: {
    classes: 'sfpro-regular me-2 mt-2 sepheredStep',
    secondary: true,
    text: '<span type="text" class="sfpro-regular opacity-90 fs-14px ls-28 m-sm-2 ">5 of 6</span>',
    type: 'back',
  },
  stepSix: {
    classes: 'sfpro-regular me-2 mt-2 sepheredStep',
    secondary: true,
    text: '<span type="text" class="sfpro-regular opacity-90 fs-14px ls-28 m-sm-2 ">6 of 6</span>',
    type: 'back',
  },
};

export const defaultStepOptions: Step.StepOptions = {
  classes: 'shepherd-theme-arrows custom-default-class',
  scrollTo: { behavior: 'smooth', block: 'center' },
  cancelIcon: {
    enabled: true,
  },
};

Answer 1

可以向每个按钮添加action(){ do_something }。

 next: {
    classes: 'btn-purple-bg me-2 mt-2 sfpro-regular',
    text: '<span class="button-text">Next</span>',
    type: 'next',
    action() {
      return this.show('some_step_name');
    }    
  }