"attr-tracking" does not seem to work on "a" tags when "target" is "_blank"

[wheeleruniverse]

The documentation for the serverless-website-analytics-client claims that:

If you specified the attr-tracking attribute on the script tag, then all button and a HTML elements that have the swa-event attribute on them will be tracked.

I have multiple button and a tags on my pages with the required "swa-event" attributes. The button and any a tags without the "target" attribute set seem to be working fine. My website has a lot of external links that use "target" _blank. I still want to track these events.

     // works
    <?= "<a class='brand-name' href='$rootUrl' swa-event='Navigate->Home' swa-event-async swa-event-category='Navigate'>WHEELER RECOMMENDS</a>" ?>

    // doesn't work (no track API call in the network tab -- looks like call is not even attempted)
    <a class='github-link'
       href='https://github.com/wheeleruniverse/wheelerrecommends'
       swa-event='Open->GitHub'
       swa-event-async
       swa-event-category='Open'
       target='_blank'
    >
        <i class='fa fa-github github-icon'></i>
    </a>

I also tried without "swa-event-async", but it seems the same

Here are some links that could help:

• Website: https://wheelerrecommends.com/
• Code: https://github.com/wheeleruniverse/wheelerrecommends/blob/master/web/index.php

[rehanvdm]

Thanks for sharing the source. I believe that you are using an old version. If I look at the minified source code on the button event listener, I can see that it does not have the async code and that the send tracking method is only accepting 3 arguments when it should be 4.

The async option has been added recently https://github.com/rehanvdm/serverless-website-analytics-client/pull/20/files#diff-29e2e19e8c63a5bdbd717edb24f8517c4d7037762d9a2ed9eeddc9fce9e31a59R248

Can you try to update your backend CDK version of the serverless-website-analytics? It will then have the latest version of the client-side script.

[wheeleruniverse]

Hey @rehanvdm , thanks for the quick reply. I could see that the script doesn't match the latest for some reason. I tried to update the project to use the latest (v1.11.1), but it already was.

  "dependencies": {
    "aws-cdk-lib": "2.147.2",
    "constructs": "^10.0.0",
    "serverless-website-analytics": "^1.11.1", <--
    "source-map-support": "^0.5.21"
  }

https://github.com/West-Michigan-AWS-Users-Group/serverless-analytics/blob/main/package.json

I downloaded the source and manually updated the "client-script.js" in S3 where CloudFront was pulling from.

I created a CloudFront Invalidation for "/*" to ensure the client-script.js was updated.

I can see the updated script coming from the CloudFront domain now.

• https://dhscpc2fh3pyz.cloudfront.net/cdn/client-script.js

However, I am still not seeing the "track" API in the network tab for most "a" tag elements on the page.

[rehanvdm]

I can see it on the button event now.

I also made the PR above to fix an issue, it turns out that event.Target (is the i element) is the element that received the clicked and bubbled it up to the element that has the handler (the a tag). We have to use event.currentTarget to get the a element. https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget

Can you update the backend CDK code again, deploy and test? The latest version is 1.12.0 and was shipped by this PR that thas the updated client-side script https://github.com/rehanvdm/serverless-website-analytics/pull/91

[rehanvdm]

Also, don't use async if you use target="_blank" it's more reliable as it does not need to use the Beacon request type which is easier blocked by some browsers (the normal method uses POST).

[wheeleruniverse]

Thank you @rehanvdm ! It's working with v1.12.0. I really appreciate the very fast turn around time. 💞