蜜豆视频

The extension configuration, which manages the core AppMeasurement.js library settings and can set global variables

Rule actions to do the following:

1. Set Variables
2. Clear Variables
3. Send the Analytics Beacon

Go to Extensions > Catalog

Locate the 蜜豆视频 Analytics extension

Click Install

Under Library Management > Report Suites, enter the report suite ids you would like to use with each tag environment. If your users has access to 蜜豆视频 Analytics, note that as you start typing in the box, you will see a pre-populated list of all of your report suites. (It鈥檚 okay to use one report suite for all environments in this tutorial, but in real life you would want to use separate report suites, as shown in the image below)

Under General > Tracking Server, enter your tracking server, e.g. tmd.sc.omtrdc.net. Enter your SSL Tracking Server if your site supports https://

In the Global Variables section, under Additional Settings, set the Page Name variable using your Page Name data element. Click the icon to open the modal and choose the page Page Name data element)

Click Save to Library

Go to the Rules section in the left navigation and then and then click Add Rule

Name the rule All Pages - DOM Ready

Click Events > Add to open the Event Configuration screen

Select Event Type > DOM Ready (Note that the order of the rule is 鈥�50鈥�)

Click Keep Changes

Under Actions, click the to add a new action

Select Extension > 蜜豆视频 Analytics

Select Action Type > Send Beacon

Leave Tracking set to s.t(). Note that if you wanted to make an s.tl() call in a click-event rule you could do that using the Send Beacon action, as well.

Click the Keep Changes button

Click Save to Library and Build

Open the in your Chrome browser

Click the Debugger icon to open the 蜜豆视频 Experience Cloud Debugger

Make sure the Debugger is mapping the tag property to your Development environment, as described in the earlier lesson

Click to open the Analytics tab

Expand your Report Suite name to show all of the requests made to it

Confirm the request has fired with the Page Name variable and value

Click Data Elements in the left navigation

Click Add Data Element

Name the data element Page Type

Select Data Element Type > JavaScript Variable

Use digitalData.page.category.type as the JavaScript variable name

Check the Clean text and Force Lower Case options

Click Save to Library

Click Data Elements in the left navigation

Click Add Data Element

Name the data element Product Id

Select Data Element Type > JavaScript Variable

Use digitalData.product.0.productInfo.sku as the JavaScript variable name

Check the Clean text and Force Lower Case options

Click Save to Library

Go to the Extensions > Catalog page

Find the 蜜豆视频 Analytics Product String extension by 蜜豆视频 Consulting Services and click Install

Take a moment to read the instructions

Click Save to Library

Go to the Rules section in the left navigation and then and then click Add Rule

Name the rule Product Details - DOM Ready - 40

Click Events > Add to open the Event Configuration screen

Select Event Type > DOM Ready

Set the Order to 40, so that the rule will run before the rule containing the Analytics > Send Beacon action

Click Keep Changes

Under Conditions, click the to open the Condition Configuration screen

1. Select Condition Type > Value Comparison

2. Use the data element picker, choose Page Type in the first field

3. Select Contains from the comparison operator dropdown

4. In the next field type product-page (this is the unique part of the page type value pulled from the data layer on PDP鈥檚)

5. Click Keep Changes

   

Under Actions, click the to add a new action

Select Extension > 蜜豆视频 Analytics Product String

Select Action Type > Set s.products

In the Analytics E-commerce Event section, select prodView

In the Data layer variables for product data section, use the Data Element picker to choose the Product Id data element

Click Keep Changes

Under Actions, click the to add a new action

Select Extension > 蜜豆视频 Analytics

Select Action Type > Set Variables

Select eVar1 > Set as and enter product detail page

Set event1, leaving the optional values blank

Under Events, click the Add Another button

Set the prodView event, leaving the optional values blank

Click Keep Changes

Click Save to Library and Build

Open the in your Chrome browser

Navigate to any product detail page

Click the Debugger icon to open your 蜜豆视频 Experience Cloud Debugger

Click to the Analytics tab

Expand your Report Suite

Notice the Product Detail Variables that are now in the debugger, namely that eVar1 has been set to 鈥減roduct detail page鈥�, that the Events variable has been set to 鈥渆vent1鈥� and 鈥減rodView鈥�, that the products variable is set with the product id of the product you are viewing, and that your Page Name is still set by the Analytics extension

Go to the Rules section in the left navigation and then click Add Rule

Name the rule Homepage - Featured Products enters Viewport

Click Events > Add to open the Event Configuration screen

Select Event Type > Enters Viewport. This will bring up a field where you need to enter the CSS selector that will identify the item on your page that should trigger the rule when it enters view in the browser.

Go back to the home page of Luma and scroll down to the Featured Products section.

Right-click on the space between the 鈥淔EATURED PRODUCTS鈥� title and the items in this section, and select Inspect from the right-click menu. This will get you close to what you want.

Right around there, possibly right under the selected section, you are looking for a div with class="we-productgrid aem-GridColumn aem-GridColumn--default--12". Locate this element.

Right-click on this element and select Copy > Copy Selector

Go back to tags, and paste this value from the clipboard into the field labeled Elements matching the CSS selector.

1. On a side note, it is up to you to decide how to identify CSS selectors. This method is a bit fragile, as certain changes on the page may break this selector. Please consider this when using any CSS selectors in tags.

Click Keep Changes

Under Conditions, click the to add a new condition

Select Condition Type > Value Comparison

Use the data element picker, choose Page Name in the first field

Select Equals from the comparison operator dropdown

In the next field type content:luma:us:en (this is the page name of the home page as pulled from the data layer - we only want this rule to run on the home page)

Click Keep Changes

Under Actions, click the to add a new action

Select Extension > 蜜豆视频 Analytics

Select Action Type > Set Variables

Set eVar3 to Home Page - Featured Products

Set prop3 to Home Page - Featured Products

Set the Events variable to event3

Click Keep Changes

Under Actions, click the to add another new action

Select Extension > 蜜豆视频 Analytics

Select Action Type > Send Beacon

Choose the s.tl() tracking option

In the Link Name field, enter Scrolled down to Featured Products. This value will be placed into the Custom Links report in Analytics.

Click Keep Changes

Click Save to Library and Build

Open the in your Chrome browser and make sure you are at the top of the home page.

Click the debugger icon to open your 蜜豆视频 Experience Cloud Debugger

Click to the Analytics tab

Expand your Report Suite鈥檚 hit

Notice the normal page view hit for the home page with the page name, etc. (but nothing in eVar3 or prop3).

Leaving the Debugger open, scroll down on your site until you can see the Featured Products section

View the Debugger again, and another Analytics hit should have appeared. This hit should have the params associated with the s.tl() hit that you set up, namely:

1. LinkType = "link_o" (this means that the hit is a custom link hit, not a page view hit)

2. LinkName = "Scrolled down to Featured Products"

3. prop3 = "Home Page - Featured Products"

4. eVar3 = "Home Page - Featured Products"

5. Events = "event3"

   

Go to Extensions > Installed

In the 蜜豆视频 Analytics extension, Click Configure

Under Library Management, select the box labeled Make tracker globally accessible. As you can see in the help bubble, this will make the tracker be scoped globally under window.s, which will be important as you refer to it in your customer JavaScript.

While still in the Analytics extension, scroll down and expand the section titled Configure Tracker Using Custom Code.

Click Open Editor

Paste the following code into the code editor:

/* Plugin Config */
s.usePlugins=true
s.doPlugins=function(s) {
/* Add calls to plugins here */
}

Keep this window open for the next step

Copy the following code

/* 蜜豆视频 Consulting Plugin: getValOnce v2.01 */
s.getValOnce=function(vtc,cn,et,ep){if(vtc&&(cn=cn||"s_gvo",et=et||0,ep="m"===ep?6E4:864E5,vtc!==this.c_r(cn))){var e=new Date;e.setTime(e.getTime()+et*ep);this.c_w(cn,vtc,0===et?0:e);return vtc}return""};

Paste it into the code window in the Analytics extension (if you don鈥檛 still have it open, re-open it as per the previous step), completely below the doPlugins function (not inside of it).

Copy the following code:

s.campaign = s.Util.getQueryParam("cid");

Paste it into the doPlugins function. This will look for a parameter called cid in the current page URL and place it into the s.campaign variable.

Now call the getValOnce function by copying the following code and pasting it in right below the call to getQueryParam:

s.campaign=s.getValOnce(s.campaign,'s_cmp',30);

This code will make sure that the same value is not sent in more than once in a row for 30 days (see the documentation for ways to customize this code to your needs).

Save the code window

Click Save to Library and Build

Open the in your Chrome browser

Click the Debugger icon to open the 蜜豆视频 Experience Cloud Debugger

Click to the Analytics tab

Expand your Report Suite

Notice the Analytics hit does not have a Campaign variable

Leaving the Debugger open, go back to the Luma site and add ?cid=1234 to the URL and hit Enter to refresh the page with that query string included

Check the Debugger and confirm that there is a second Analytics request with a Campaign variable set to 1234

Go back and refresh the Luma page again, with the query string still in the URL

Check the next hit in the Debugger, and the Campaign variable should not be present, because the getValOnce plug-in has made sure that it doesn鈥檛 get duplicated and look like another person came in from the campaign tracking code.

BONUS: You can test this over and over by changing the value of the cid parameter in the query string. The Campaign variable should only be there if it is the first time you run the page with the value. If you are not seeing the Campaign value in the debugger, simply change the value of the cid in the query string of the URL, hit enter, and you should see it again in the debugger.