You're viewing help content for version:

Page Tracker is a piece of JavaScript code that you include in third-party websites' code to enable Adobe Analytics to capture usage data around Adobe Experience Manager (AEM) assets on these websites.

To capture events, such as clicks and so on that are specific to assets, you also include the Embed code in third-party websites' code.

Adding Page Tracker code

You add the Page Tracker code within the header section of your website code. To know how to view and download the Page Tracker code, see Page Tracker.

The following scriptlet is to be inserted in the <head> of HTML page to be enabled for Asset Insights. This scriptlet initializes the Pagetracker Core javascript (fetched via the 'src' ttributes mentioned below). Parameters available for customization as also listed. Asset Insights' client-libraries include default values for the parameters.

While the scriptlet (and Pagetracker Core javascript) can be used AS-IS without any modifications, users already using Adobe Analytics on their webpage for tracking events other than Asset Insights (e.g., page-view events) can consider the scriptlet below as a reference implementation for integration.

When using DTM, the HTML fragment below can be configured to always load when the web page loads. It should be triggered at the top of the page. In addition, the HTML fragment should be inserted as 'Sequential HTML' in Javascript/Third Party tags.

Note:

Exclude the call to assetAnalytics.dispatcher.init() while inserting as sequential HTML in DTM.

Note:

You can alter the code from the point where pagetracker.js and AppMeasurement.js are loaded. If the scriptlet is already availble (via DTM or otherwise), remove the request to fetch appmeasurement.js from the code.

<script type="text/javascript" src="http://localhost:4503/etc/clientlibs/sitecatalyst/appmeasurement.js"></script>
<script type="text/javascript" src="http://localhost:4503/etc/clientlibs/foundation/assetinsights/pagetracker.js"></script>

<script type="text/javascript">
    /**
     * this attribute identifies which data-attribute should be read for identifying if the asset is a candidate
     * for Asset Insights' tracking
     * default is <code>trackable</code>
     * NOTE: it is recommended to keep this value at its default.
     *
     * @param attrTrackable  identifies appropriate <code>data</code> attribute in the asset-embed-code
     */
    // assetAnalytics.attrTrackable = 'trackable';


    /**
     * this attribute shall determine if assets without the </code>data-trackable</code> attribute (see above)
     * are to be considered candidates for Asset Insights' tracking.
     * By setting this to <code>true</code> customers can ensure that all assets embedded using asset-embed-code
     * are candidates for Asset Insights' tracking, unless they have <code>data-trackable</code> as <code>false</code>
     * default is <code>false</code>.
     *
     * @param defaultTrackable  determines if assets without <code>data-trackable</code> attribute are to be tracked.
     */
    // assetAnalytics.defaultTrackable = false;


    /**
     * this attribute identifies which data-attribute contains the Asset ID in the asset-embed-code
     * default is <code>aem-asset-id</code>
     * NOTE: it is recommended to keep this value at its default.
     *
     * @param attrAssetID  identifies appropriate <code>data</code> attribute in the asset-embed-code
     */
    // assetAnalytics.attrAssetID = 'aem-asset-id';

    /**
     * Pagetracker Core javascript tries to minimize the tracking-calls generated for asset-load-events by
     * aggregating multiple asset-load-events
     * (i.e., sending a single tracking-call for multiple asset-load-events)
     * this value specifies (in milliseconds) how much time to wait (since last asset-load-event) for
     * subsequent asset-load-events
     * If the web-page contains a lot of images which are 'lazily-loaded' (e.g., user-scrolling past
     * current window boundaries) it is recommended to keep this value high so that tracking-calls
     * resulting due to asset-load-events are minimized.
     * While keeping this value high WILL reduce tracking-calls generated due to asset-load-events,
     * please be aware that keeping this value high MAY affect accuracy of data since asset-load-events
     * generated within the configured interval CAN NOT be sent to Analytics if user navigates away/closes
     * the webpage before the interval expires.
     * default is 2000
     *
     * @param assetImpressionPollInterval  specifies interval-timeout (milli seconds) to wait for asset-load-events
     *                                     before generating an tracking-call with aggregated asset-load-events.
     */
    // assetAnalytics.assetImpressionPollInterval = 2000;

    /**
     * this attribute determines how many asset-load-events can be aggregated in a single tracking-call.
     * This is important from the context of max-#-of-characters in a GET request
     * default is 1800
     * NOTE: it is recommended to keep this value at its default.
     *
     * @param attrTrackable  identifies appropriate <code>data</code> attribute in the asset-embed-code
     */
    // assetAnalytics.charsLimitForGET = 1800; // bytes

    /**
     * this attribute enables logging. Any 'truthy' value will enable logging
     *
     * @param debug  enable/disable logs
     */
    // assetAnalytics.debug = false;
    /**
     * Following is the call to initialize Pagetracker Code javascript
     * NOTE: Please make sure that conversion-variables and success-events specified below have been initialized
     *       in the RSID appropriately
     * NOTE: When using a pre-defined AppMeasurement object instead of letting Pagetracker Core create its own instance
     *       1. Please make sure that the Adobe Analytics tool is completely initailzed (i.e., the object itself isn't undefined
     *       2. First 3 arguments (viz., RSID, Tracking Server, Visitor Namespace) to the <code>init()</code> function
     *          will be ignored
     * NOTE: If using DTM, the code below MUST be invoked after both <code>assetAnalytics</code> AND <code>AppMeasurement</code>
     *       object(s) are available. A good place would be 'Customize Page Code' of Adobe Analytics Tool Settings
     *       Make sure that the code is called 'After UI settings'
     * WARN: Since Asset Insights has been configured to use Auto-provisioned (reserved) Mappings for AEM Assets
     *       make sure that "Save AEM Reporting" is also enabled on Adobe Analytics UI for selected RSID.
     *       Otherwise Asset Insights may show incorrect results and can even result in loss of data
     */
    assetAnalytics.dispatcher.init(
            "samplereportsuit",  /** RSID to send tracking-call to */
            "xxx.xxx.xxx.net",  /** Tracking Server to send tracking-call to */
            "visitor",  /** Visitor Namespace to send tracking-call to */
            "",
            "",
            "",
            "",
            undefined  /** [OPTIONAL] if the webpage already has an AppMeasurement object, please include the object here. If unspecified, Pagetracker Core shall create its own AppMeasurement object */
            );
    /*
     * NOTE: If the webpage already has an AppMeasurement object, please use that here. Also, if doPlugins() is already being
     *       used, add the call <code>assetAnalytics.core.updateContextData()</code> at its end.
     */
    assetAnalytics.dispatcher.s.usePlugins=true;
    assetAnalytics.dispatcher.s.doPlugins=assetAnalytics.core.updateContextData;

    window.addEventListener('load', assetAnalytics.core.optimizedAssetInsights, false);
    window.addEventListener('load', assetAnalytics.dispatcher.s.t, false);
</script>

You can customize the following parameters in the scriptlet based on the tracking requirements for your website:  

Parameter Description
attrTrackable Identifies the appropriate <code>data</code> attribute in the asset-embed-code. This attribute determines whether assets without the </code>data-trackable</code> attribute are to be considered candidates for Asset Insights' tracking. By setting this to <code>true</code>, you can ensure that all assets embedded using asset-embed-code are candidates for Asset Insights' tracking, unless they have value of <code>data-trackable</code> configured as <code>false</code>. The default value is <code>false</code>.
defaultTrackable Determines whether assets without the <code>data-trackable</code> attribute are to be tracked. This attribute identifies the data-attribute that contains the Asset ID in the asset-embed-code. The defaultvalue  is <code>aem-asset-id</code>. Adobe recommends you keep this value at its default.
param attrAssetID attrAssetID Identifies the appropriate <code>data</code> attribute in the asset-embed-code. Pagetracker Core javascript tries to minimize the tracking-calls generated for asset-load-events by aggregating multiple asset-load-events, for example, sending a single tracking-call for multiple asset-load-events. This value specifies (in milliseconds) how much time to wait (since last asset-load-event) for subsequent asset-load-events. If the web page contains a lot of images that are lazily loaded (for example, when user-scrolls beyond the current window boundaries), keep this value high so that tracking-calls triggered by loading assets are minimized. However, keeping this value high may affect the accuracy of data because asset-load-events generated within the configured interval cannot be sent to Analytics if the user exits/closes the webpage before the interval expires. The default value is 2000.
assetImpressionPollInterval Specifies the interval timeout (in milli seconds) for asset-load events before generating a tracking call with aggregated asset-load-events. It determines how many asset-load-events can be aggregated in a single tracking-call. The default value is 1800.
attrTrackable Identifies the appropriate <code>data</code> attribute in the asset-embed code.
debug Enables/disables logs

Adding Embed code

You add the Embed code within the body of your website code. The following code snippet displays the Embed code included in a sample web page:

<body>

      <img
            src="http://localhost:4502/xxxx/content/dam/test/xyz.jpg"
            data-aem-asset-id="aaid:a386f2cd78234becb66bd11575f9452d"
            data-trackable=true
            onload=assetAnalytics.core.assetLoaded(this)>

        <a
            href="http://www.adobe.com"
        
            onclick="assetAnalytics.core.assetClicked(this);return false">
           <img
                    src="http://localhost:4502/xxxx/content/dam/test/xyz.jpg"
                    data-aem-asset-id="aaid:7fa01fce0ebe40268cd6dcf07e2d9cb1"
                    data-trackable=true
                    onload=assetAnalytics.core.assetLoaded(this)>
        </a>

    </body>

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy