Question

对redux和gtm来说都相当新。我正在尝试使用Google Tagmanager，并且我有一个导航栏，我想在其中获取每个NavLink的类名，以便可以在gtm事件中发送它。这样做的原因是，我可以将gtm-event放在点击处理程序中，所以我不需要在每个onClick中都放置完整的gtm代码。有没有办法可以从该无状态功能组件的Navlinks中获取类名？在下面的示例中，我仅在一个Navlinks中放置了一个gtm-event（出于可读性），但是我的任务是在每个NavLinks中都放置一个。如果您有任何问题，请告诉我。任何帮助表示赞赏。谢谢！

    const intl = useIntl();
    const isAuthenticated = useSelector(state => state.auth.token !== null);
    const locale = useSelector(state => state.common.locale);
    const user = useSelector(state => state.user.user);

    return (
        <StyledCategoryNav>
            <div className="shadow" />
            <div className="wrapper">
                <ul>
                    <li>
                        <NavLink
                            exact
                            to={`/${locale}/lobby`}
                            className="lobby"
                            onClick={() => {
                                TagManager.dataLayer({
                                    dataLayer: {
                                        event: 'open_category',
                                        locale: locale,
                                        userId: isEmpty(user) ? null : user.UserID,
                                        clicked: [Variable that takes the clicked buttons classname]
                                    }
                                });
                            }}
                        >
                            <HomeIcon />
                            {intl.formatMessage({ id: 'categories.lobby' })}
                        </NavLink>
                    </li>
                    {isAuthenticated && (
                        <li>
                            <NavLink
                                exact
                                to={`/${locale}/lobby/new`}
                                className='new'
                        >
                                {intl.formatMessage({ id: 'categories.new' })}
                            </NavLink>
                        </li>
                    )}
                    <li>
                        <NavLink exact to={`/${locale}/lobby/recommended`}
                        className='recommended'
                        >
                            {intl.formatMessage({ id: 'categories.recommended' })}
                        </NavLink>
                    </li>
                </ul>
            </div>
        </StyledCategoryNav>
    );
}

Answer 1

e.target.className应该可以解决问题。

请确保使用activeClassName而不是className，因为对于NavLink，当路由匹配时，react-router将添加一个名为active的类，因此如果您的班级名称是一串用空格隔开的班级。

Demo

<NavLink
    exact
    to={`/${locale}/lobby`}
    activeClassName="lobby"
    onClick={(e) => {
        TagManager.dataLayer({
            dataLayer: {
                event: 'open_category',
                locale: locale,
                userId: isEmpty(user) ? null : user.UserID,
                clicked: e.target.className //<----here
            }
        });
    }}
>

Answer 2

在路由器参数中发送一个类名，然后简单地从另一个页面获取该参数。如果需要更多帮助，请告诉我。

例如： {isAuthenticated &&（

<导航链接精确到= {{/${locale}/lobby/new?**classname="class-name**"} className ='新' > {intl.formatMessage（{id：'categories.new'}）}

）}

如何从NavLink获取类名或道具以与Google Tag Manager一起在无状态功能组件中与react和redux一起使用？

2 个答案: