Webページ要素を使用した顧客情報のトラッキング

Webページ要素を使用して、顧客に関する情報を収集できます。

Webページ要素を使用して顧客情報をトラッキングするには、次のことを行う必要があります。

顧客のショッピング・カートの合計額など、Webページ自体に表示される情報を指定します。
データを格納するカスタム属性プレースホルダを定義します。
特定のルールを使用してWebページ要素の値をグループ化する方法を指定します。
リアルタイム・トラッキングを開始できるようにルールを公開します。

ユースケースの例

各顧客のショッピング・カートの合計額をトラッキングするとします。
これらの値を次の3つのセグメントにグループ化するとします。
- Low value ($0 - 50)
- Medium value ($50 - 200)
- High value (> $200)

Webページ要素を使用して顧客データをトラッキングする手順は、次のとおりです。

メイン・メニューから、「Custom Attributes」を選択します。
トラッキングに使用するカスタム属性を選択します。必要なカスタム属性がリストにない場合は作成します。
1. カスタム属性を追加します。
2. 属性名(Shopping Cartなど)を入力します。
3. 「Preset」属性タイプを選択します。
4. 値としてLow value、Medium value、High valueおよびZero valueを入力します。
5. 新しい属性を事前設定値とともに保存します。
値を収集する方法を定義するルールを指定するには、「Rules」列から「Add」を選択します。
「Properties」タブのドロップダウン・リストから、収集方法として「Page Object」を選択します。
ブラウザの上部で、「Browse」(デフォルト・オプション)を選択します。これにより、ページ・オブジェクトがあるWebページに移動できます。この例では、オブジェクトがすべてのページの右上隅にあり、最初は、カート情報が0 items - $0.00に設定されています。
ページを下にスクロールし、サングラスなどの商品をカートに追加します。カート情報が1 items - $34.00と表示されます。
ページ・オブジェクトを選択するには、カート情報をクリックし、展開して製品とその値を表示します。
ブラウザの上部で、「Capture」を選択します。
表内で合計額のボックスを選択します。左下のパネルで、選択内容にそのページ・オブジェクト名.table.table-bordered > tbody > tr:eq(1) > .text-right:eq(1)が反映されます。
選択した値(この例では$34.00)のプレビューが表示されます。
選択内容を保存します。

適切なコードを自動生成するルールを定義します。

「Shopping Cart」属性をトラッキングするルールを定義します。

1. If page object has value greater than 200 then set attribute to High value
2. If page object has value greater than 50 then set attribute to Medium value
3. If page object has value greater than 0 then set attribute to Low value
When all other rules fail:
4. Set attribute to Zero value

「Shopping Cart」属性をトラッキングするために次のコードが自動的に生成されます。

// Below is the code that has been generated automatically from the attribute's rules.
 
var i, rule, value, visualValue, attrName = "Shopping Cart";
 
// start config
var config = {
    "visual": {
        "selector": ".table.table-bordered > tbody > tr:eq(1) > .text-right:eq(1)",
        "rules": [
            {
                "condition": "has value greater than",
                "value": "High value",
                "text": "200"
            },
            {
                "condition": "has value greater than",
                "value": "Medium value",
                "text": "50"
            }
        ],
        "defaultValue": "Zero value"
    }
};
// end config
 
var getAttributeValue = function (rule, visualValue) {
    var value;
    if (rule.useVisualValue === true) {
        value = visualValue;
    }
    else {
        value = rule.value;
    }
 
    return value;
};
 
var toDecimal = function (value) {
 
    var result = null;
    var parse = /[0-9]+(\.[0-9]{1,2})?/.exec(value);
 
    if (parse !== null) {
        result = parseFloat(parse[0]);
    }
 
    return result;
};
 
var getContent = function (element) {
 
    var getContentPseudos = function (element, pseudos) {
        var style, content = '';
 
        style = window.getComputedStyle(element, pseudos);
 
        if (style.getPropertyValue('content') !== 'none') {
            content = style.getPropertyValue('content').replace(/^(\"|\')|(\"|\')$/gm, '');
        }
 
        return content;
    };
 
    var getBeforeElementContent = function (element) {
        return getContentPseudos(element, ':before');
    };
 
    var getAfterElementContent = function (element) {
        return getContentPseudos(element, ':after');
    };
 
    var getNodeContent = function (element) {
        var nodeContent = '', style;
 
        style = window.getComputedStyle(element);
 
        if (style.getPropertyValue('display') === 'none' ||
            style.getPropertyValue('visibility') === 'hidden'
        ) {
            return nodeContent;
        }
 
        nodeContent += getBeforeElementContent(element);
        nodeContent += getNodesContent(element);
        nodeContent += getAfterElementContent(element);
 
        return nodeContent;
    };
 
    var getNodesContent = function (element) {
        var i, children = [], content = '';
 
        children = element.childNodes;
 
        for (i = 0; i < children.length; i++) {
 
            switch (children[i].nodeName)
            {
            case '#text':
                content += children[i].data;
                break;
            case 'IMG':
                content += children[i].alt;
                break;
            case 'STYLE':
            case 'SCRIPT':
            case '#comment':
                content += '';
                break;
            default:
                content += getNodeContent(children[i]);
            }
        }
 
        return content;
    };
 
    var content = getNodeContent(element);
    var replaceNonBreakSpace = new RegExp(String.fromCharCode(160), 'g');
    content = content.replace(/( |\n)+(?= )/g,'').replace(replaceNonBreakSpace, ' ').trim();
    return content;
};
 
var checkCondition = function (rule, value) {
    var number;
    var result = false;
    switch (rule.condition) {
    case 'equals':
        if (value === rule.text) {
            result = true;
        }
        break;
    case 'does not equal':
        if (value !== rule.text) {
            result = true;
        }
        break;
    case 'contains':
        if (value.indexOf(rule.text) !== -1) {
            result = true;
        }
        break;
    case 'does not contain':
        if (value.indexOf(rule.text) === -1) {
            result = true;
        }
        break;
    case 'has value less than':
        number = toDecimal(value);
        if (number !== null && number < parseFloat(rule.text)) {
            result = true;
        }
        break;
    case 'has value greater than':
        number = toDecimal(value);
        if (number !== null && number > parseFloat(rule.text)) {
            result = true;
        }
        break;
    default:
        result = false;
    }
 
    return result;
};
 
var onReady = function () {
 
    if (document.addEventListener) {
        document.addEventListener('DOMSubtreeModified', onModifieSubTree, false);
    } else if (document.attachEvent) {
        document.attachEvent('DOMSubtreeModified', onModifieSubTree);
    }
 
    capture();
};
 
var onModifieSubTree = function () {
    capture();
};
 
var capture = function () {
 
    var rule, value, visualValue, elements, element;
 
    elements = dom.find(config.visual.selector);
 
    if (!elements || elements.length === 0) {
        return;
    }
 
    element = elements.shift();
 
    visualValue = getContent(element);
 
    for (i = 0; i < config.visual.rules.length; i++) {
        rule = config.visual.rules[i];
 
        if (checkCondition(rule, visualValue)) {
            value = getAttributeValue(rule, visualValue);
            break;
        }
    }
 
    if (value) {
        visitor.storeAttr(attrName, value);
    } else if (config.visual.defaultUseVisualValue) {
        visitor.storeAttr(attrName, visualValue);
    } else {
        visitor.storeAttr(attrName, config.visual.defaultValue);
    }
 
    if (document.removeEventListener) {
        document.removeEventListener('DOMSubtreeModified', onModifieSubTree);
    } else if (document.detachEvent) {
        document.detachEvent("DOMSubtreeModified", onModifieSubTree);
    };
 
}
 
events.domReady(onReady);

この構成を保存します。

「URL」タブをクリックして、この属性を収集できるページを追加します。たとえば、ホームページを追加してすべてのサイト・ページをトラッキングできます。
少なくとも1つのURLを入力し、保存します。
メイン・メニューから、「Publish Center」を選択します。
公開センターで、編集中のオブジェクトのリストから「Shopping Cart」属性を探します(「Editing」フィルタを使用します)。
属性を選択し、公開準備完了としてマークします。「Shopping Cart」属性が「Publish Queue」に表示されます。
属性を公開して稼働中にし、トラッキングを開始します。

ノート: カスタム属性スクリプトは、サイトレベル・スクリプトの後に実行されます。