Expand my Community achievements bar.

Join us for our second AMA on experimentation and personalization strategies with Target, occurring on June 3rd!

Where to add client-side JS to detect a behavior and build a corresponding Adobe Target profile script?

Avatar

Level 1

I am trying to create a profile script in Adobe Target for users that scroll more than 50% of a page. I was told that I have to place some client-side javascript so the info can be collected client-side and passed into Target as profile parameters using targetPageParams() or adobe.target.trackEvent().

 

So my questions is WHERE and HOW do I do this? Do I just add the snippet to the <head> in a modification in an Adobe Target activity and then create the corresponding profile script? Or is there an actual example of how to implement something like this available for me to work off of? Thank you!

 

2 Replies

Avatar

Level 5

Hi @bkrane2 ,

You can add below snippet directly in website head section.

targetPageParams()

window.addEventListener('scroll', function () {
  const scrollTop = window.scrollY;
  const docHeight = document.documentElement.scrollHeight - window.innerHeight;
  const scrollPercent = (scrollTop / docHeight) * 100;

  if (scrollPercent > 50 && !window.scrollTracked) {
    window.scrollTracked = true;

    window.targetPageParams = function () {
      return { scrolledHalf: true };
    };
  }
});

adobe.target.trackEvent()

window.addEventListener('scroll', function () {
  const scrollTop = window.scrollY;
  const docHeight = document.documentElement.scrollHeight - window.innerHeight;
  const scrollPercent = (scrollTop / docHeight) * 100;

  if (scrollPercent > 50 && !window.scrollTracked) {
    window.scrollTracked = true;

    if (typeof adobe !== 'undefined' && adobe.target && adobe.target.trackEvent) {
      adobe.target.trackEvent({
        mbox: 'scroll-depth',
        params: { scrolledHalf: 'true' }
      });
    }
  }
});

You can use attribute value profile.scrolledHalf === "true" later for identify users.

Note: This response is inspired from Generative AI.

Avatar

Level 2

Hi @bkrane2 ,

 

You can add the code as mentioned by @AnkitJasani29  in the head after target script tag, and create a form-based activity in Target, with location as the name of mbox used in code ('scroll-depth'). You can also add condition in the activity to check if param is available and or is set to true.