Targeting DOM element and cookie

[sabahatu1546489]

Hi there,

We are trying to target DOM element and cookie value through targetPageParams() function. Essentially we want to do that for 2 separate experiments. You can see the code below. We can see "trackCookie" coming up under Visitor Profile but "DOMElement" is not coming up. Could you please help us out here

function targetPageParams() {

    if(location.pathname.indexOf("contact") > -1){

        var timer = setInterval(function(){

            if($(".ttt:contains('T12')").length > 0){

                clearInterval(timer);

                return "profile.DOMElement=true"; 

            }

        }, 100);

    }else{

        function readCookie(name) {

            var nameEQ = name + "\x3d";

            var ca = document.cookie.split(";");

            for (var i = 0; i < ca.length; i++) {

                var c = ca[i];

                while (c.charAt(0) == " ") c = c.substring(1, c.length);

                if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length)

            }

            return null

        }

        return "profile.trackCookie=" + readCookie("superman");

    }

}

Thanks,

[sabahatu1546489]

ryanr8​ could you help please

[Ryan_Roberts_]

Looks like you are trying to add a delay in the targetPageParams function. I'd suspect this is why you don't see the DOMElement attribute showing. The targePageParams function cannot way for DOM elements to exist before returning a value. Target's call to the server will have already happened.

If you are trying to check the presence of a DOM element and send that info back to Target as a flag you probably will need to do this in a secondary call to Target (the auto created global mbox call fires before the body gets loaded - this is to prevent content changes from causing flicker).

See help for manually firing a getOffer: adobe.target.getOffer(options). Pass the profile.DOMElement in the params section.Hope that helps!

[sabahatu1546489]

ryanr8 Thanks for your reply. I'll give it try now.

but could you tell how we can return multiple values under targetPageParams function

for example we are passing prodct id and category for recommendation and

at the same time we want to return the read cookie function. now the funtciton allows only one return statement.

How can we go about doing this.

if(document.URL.indexOf("productdetailpage") > -1){

       return{

          "entity": {

            "id": prodID,

            "categoryId": categoryID,

          }

}

       // how can we pass this below return statement as well

        return "profile.trackCookie=" + readCookie("superman");

   }

[Ryan_Roberts_]

Your return can contain a list of parameters that get added.

function targetPageParams() {

  return "param1=value1&param2=value2&p3=hello%20world";

}

There are more ways to format your return. You can see examples in help: targetPageParams()​

[sabahatu1546489]

ryanr8​ bit stuck here. I tried the following way but I don't see the that profile in the audience list. Could you please help

if(document.URL.indexOf("productdetailpage") > -1){

       return{

          "entity": {

            "id": prodID,

            "categoryId": categoryID,

              "profile": {

                "TFuser" : readCookie("superman")

            }

          }

}

   }

[sabahatu1546489]

ryanr8​ any luck with that?

[Ryan_Roberts_]

Entity and profile should be at the same level. Also, I don't see the targetPageParams function. It should probably be after your if condition.

Also, the quick way to debug is to monitor the mbox requests from the page this is running. Can you see the expected url parameters on that mbox request? Is "entity.id=X" showing? Is "profile.TFuser=Y" showing? If they are you will see them show up in the drop down, but that sometimes takes a few minutes to reflect the newest data.

[sabahatu1546489]

I have been trying to wrap my head around "manually firing a getOffer: adobe.target.getOffer(options)"

I tried some thing like this with google search but can't seem to figure out what would be the name or Api of the Offer I need to use inside adobe.target.applyOffer({offer: response});

Could you please give an example if I am using this to check the existence of the DOM element and then returning profile.DOMelement

adobe.target.getOffer({

                mbox: 'target-global-mbox',

                success: function(response) {

                    console.log('Response:', response); 

                    adobe.target.applyOffer({offer: response});

                },

                error: function(status, error) {

                    console.log('Error:', status, error);

                }

            });

[Ryan_Roberts_]

Hi,

Sorry if I was confusing. I mean that you could do your DOM element check on the page and then if it returns true you could then send that as a parameter to Target via a getOffer function. Target can also use this "secondary" call to qualify a visitor for a test and return a content change to the page. Though because it is a secondary call the built in flicker handling Target has will not be in play so you may see content changes flicker in this case.

That said this is what I'd try:

//DOM element checker coder runs, then if true call the getOffer

adobe.target.getOffer({

  mbox: 'target-global-mbox',

  params: {'requestType':'secondary','profile.DOMElement':'true'},

  success: function(response) {

   //console.log('Second response back from Target');

   adobe.target.applyOffer({offer: response});

  },

  error: function(status, error) {

    console.log('Error', status, error);

  }

});

You can uncomment the console.log under success if you like for debugging. I also added a parameter called requestType since I used the target-global-mbox name. This will allow you to create an audience to limit a test to just requests that come with this getOffer, rather than the auto-created version of this mbox that fires on every page.

[Ryan_Roberts_]

I think I may have missed part of your question above. The adobe.target.applyOffer({offer: response}); will simply apply the content change Target returns in that getOffer. If there is no test that a visitor qualifies for then nothing will happen. If they qualify for a test with content changes then that line allows the at.js file to load that content in the predefined location of the page.

[sabahatu1546489]

certainly we are going on a right direction. building the perspective will be even helpful. I think I am just missing something here. Please let me know what part is it?

in short: we want to launch an activity based on the DOM element

(I understand targetpageparam() is not feasible becuse of timing. I get that. adobe.target.applyOffer can be used although flicker is expected with it. I get that too.)

In order to use adobe.target.applyOffer and adobe.target.getOffer

In Target dashboard

1- Under Offers, I save the javascript code for example to alter the "add to bag color and size" on Product details page (PDP) .

2- Then I run an Activity on Product details page (PDP) that would contain the code you supplied in your last reply. This code will basically activate the offer I saved in my last step.

https://codepen.io/sabahat88/pen/aVZMvK?editors=0010

The getOffer, you are running it as DOM checker but where the code for actually checking the DOM element would go? like the one below.

  if($(".ttt:contains('T12')").length > 0){

            }

Please let me know

[Ryan_Roberts_]

Assuming you are using the VEC instead of form based - You can use a Target activity to add the DOM element checker and getOffer function to the PDP. Create an activity on the PDP and use insert element (HTML) to an element that will exist below the element you are looking for (for timing purposes). The HTML you add should be a script tag with something like this:

This will fire another target-global-mbox request IF the DOM Element exisits and you create a second Target Activity to respond on this call.

The first activity should have an audience defined where the custom attribute > target-global-mbox > requestType > parameter doesn't exist - this prevents it from getting returned in the secondary call.

The second activity is where you apply the content changes you want to test/personalize. It needs an audience defined where custom attribute > target-global-mbox > DOMElement contains true. So a visitor only qualifies when the DOM element exists.

I'm guessing you'd want to check for the DOMElement on each page view of a PDP and not just once per visitor. So there's no use sending it as a "profile." attribute.

[sabahatu1546489]

ryanr8 HI Ryan, Okay I have launched an Activity with DOM element checker and getOffer function code as you said.
The DOM element "T12" exists right after body opening tag. The DOM checker and getOffer function was added in VEC by clicking on element way after 'T12' and yes I added the code under script tags
but for audience as you said:

"The first activity should have an audience defined where the custom attribute > target-global-mbox > requestType > parameter doesn't exist - this prevents it from getting returned in the secondary call." and

I don't see this audience coming up in Audience list.. (nor in the mbox Network call).

secondly audience "custom attribute > target-global-mbox > DOMElement contains true" for the second activity, is not showing up as well.

I still saved both experiment by adding these audiences but its not working.

Could you help please?

Thanks

[Ryan_Roberts_]

Yes, you have to create a new audience with the definition I supplied.

The same is true for the DOMelement audience too. NOTE that requestType will only show up in the drop down if Target has seen that parameter on a request for the target-global-mbox. So you'll need to add the code and load a page with the code so it fires before you'll be able to fully define the new audience.