如何为Shepherd的Next按钮添加自定义点击事件（如GA埋点）

Shepherd 官方原生支持给按钮配置自定义行为，不需要手动查找DOM绑定点击事件，直接在按钮配置里加action字段即可，自定义逻辑执行完手动调用原有默认方法，就不会破坏按钮原本的功能。

全局统一给Next按钮加埋点 #

直接修改你现有代码里的builtInButtons.next配置，新增action属性即可，所有步骤复用这个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',
    // 如果要给取消按钮也加埋点写法一致
    // action() {
    //   // GA埋点逻辑
    //   this.cancel()
    // }
  },
  next: {
    classes: 'btn-purple-bg me-2 mt-2 sfpro-regular',
    text: '<span class="button-text">Next</span>',
    type: 'next',
    // 新增自定义动作
    action() {
      // 这里写你的GA事件埋点逻辑，action内this指向当前tour实例，可以直接获取当前步骤信息
      // 示例：gtag('event', 'tour_next_click', { step_id: this.getCurrentStep().id, step_title: this.getCurrentStep().options.title })
      console.log('Next按钮点击，当前步骤：', this.getCurrentStep().id)
      // 自定义逻辑执行完，调用默认的下一步方法，保留原有跳转逻辑
      this.next()
    }
  },
  back: {
    classes: 'btn-purple-bg me-2 mt-2 sfpro-regular',
    secondary: true,
    text: '<span class="button-text">Previous</span>',
    type: 'back',
    // 上一步按钮加逻辑同理
    // action() {
    //   // 埋点逻辑
    //   this.back()
    // }
  },
  // 其余stepOne到stepSix的配置保持不变即可
  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,
  },
};

单步骤自定义按钮逻辑 #

如果不需要全局统一加，只想给某一个特定步骤的Next按钮加单独的埋点，直接在对应步骤的buttons配置里写action即可，单步骤配置优先级高于全局内置按钮配置。

注意事项 #

• 不推荐通过document.querySelector查找按钮DOM绑定点击事件的实现方式，Shepherd切换步骤时会重新渲染弹窗内的按钮元素，之前绑定的事件会丢失，稳定性差。
• action函数内的this默认绑定到当前Shepherd Tour实例，可直接调用next()/back()/cancel()/getCurrentStep()等所有实例方法，不需要额外传参。

内容的提问来源于stack exchange，提问作者Bhavesh Gupta