Track dynamic content while scrolling the page to bottom in DTM

These days many websites have dynamic content loading feature whenever you scroll down to the bottom of the page. Ecommerce sites like flipkart, myntra loads the additional products when users scroll to the last row of the products detail page. Sometimes, few sites use this for search results. Google uses such dynamic content loading for its google image search result.

It is important for marketers to understand how far a user has gone to find their favorite products. After this they can optimize the additional content of the page which will be loaded later on.
Tracking on such dynamic is bit tricky and you can’t rely much on your developer. To deal with that, DTM is very much efficient to track such dynamic content loading.
Ask your dev team to add a unique “div” whenever a new set of content will be loaded on the page when user does complete scroll.
Create an event based rule with condition “enter viewport” and add your unique div id in the required field as shown in screenshot below-

enterviewport
Set your eVars, events or props accordingly. One of the tricky part here is how are you going to understand the behavior of this dynamic content. This can be a s.t () call or s.tl () call. If you think that additional content loading is an another pageview then keep this as s.t () call.
You can write a custom script to understand which category of product has been viewed deep.
Ex-
If user is on Men Shoes and the page url is- “www.xyz.com/category/men-shoe” then,
Take out the category name using javascript code from the URL and add this in an eVar. You should be able to attribute this additional dynamic loading with the purchase event which is quite cool and helpful for marketer to understand how deep user is surfing before purchasing a product.
I hope this will be helpful for many ecommerce sites and media sites.

Feel free to add your comments and thoughts in comment section or email me your queries to learnmics@outlook.com

Advertisements

Test DTM rules using charles proxy

charlesproduct-dtm

I am sure that while reading this post you will start doing the handson with charles proxy. Yeah, It is so good to dig in to something new. Many people out there might have done this already. Before the weekend started, I had to implement DTM on one of the client’s site but there was no header and footer code added by their developers. It was hard to get the DTM rules and Data elements running before the monday. In this situation, charles proxy became one of my the best friends in web analytics. We have done so much things with this tool so far. Doing map local, map remote file, rewrite the code and so many other cool stuffs before pushing the code  to the end users.

Rewrite feature of Charles gives you so much flexibility to test your own code on production before pushing it to live. Using this, you can insert any code at different sections of the page. I have used this features frequently to test page tags whenever required.

Now, let’s talk about using DTM rules on your pages without adding any header and footer codes. Sometimes, I would say, It is important to understand weather it will work or won’t work before you get started.

Idea is very simple if you have used rewrite features of charles. you just need to add the header and footer script code on the different sections of the page. Let’s see how this can be done STEP BY STEP.

Step-1) Open charles proxy and Go to Tools->Rewrite. Rewrite setting window appears. Check the enable rewrite checkbox and click on “add” button to create your first rewrite. Refer the screenshot mentioned below. Give a name to this as shown in top highlighted box.

DTM-1

Step-2) Click on “Add” button presents locations section and add your website details as shown in below screenshot-

DTM-2

Step-3) Click on “Add” button presents below rules section of the above screenshot. Now, on the next screen, select the body option from the dropdown and “Response” from the checkbox. Write “<head>” in upper value input box while paste your DTM HEADER script code in the second value input field. Add the script code between <head> and </head>.

See the below screenshot for your details-

DTM-3

Step-4) Again, Click on “Add” button presents below rules section of the above screenshot. Now, on the next screen, select the body option from the dropdown and “Response” from the checkbox. Write “</body>” in upper value input box while paste your DTM FOOTER script code in the second value input field. Add the script code between <script> and </body>.

See the below screenshot for your details-

DTM-4

Step-5)Click on Apply button and then OK button. Open your website and see the tags under correct server response.

DTM-5

In the above screenshot, you can see that, I have fired a page load rule using DTM on my wordpress website. [Wordpress.com’s sites don’t support DTM yet]. Now onward, you will never complain whenever your development team some how forgets to add DTM code before you create your rules and test them.

Let me know if you face any difficulties while doing this. Feel free to add your comments.

Life Beyond s_code for Sitecatalyst Consultant

c19e42f732a48958244a2ab1a0b9b196-640x353

I am sure title for this blog may sound bit odd for you but wait I am not going to tell you about my daily routine after I finish my day. For me, Title sounds apt for what I am going to explain.

To tell you the story behind this title, Last year, one of my colleague was totally pissed off with s_code and its complexity so he whispered that “There is no life beyond s_code”. Though, I got the actually meaning of what he meant but nevertheless I am putting this other way around for a consultant(hopefully, J ) and I would say, ’ Sitecatalyst consultant have many alternate choices but you just need to pick the best possible solutions  to be the best consultant’.

Now, let me come to the point, Life is becoming tough for sitecatalyst consultants with complex and tricky business requirements from clients. In my day-to-day consulting experience, I have faced several issues with s_code such as –

  1. s_code doesn’t load on time before sitecatalyst image request send to adobe server.
  2. Developer has missed to remove correct report suites name before s_code goes on to production.
  3. Marketing team can’t wait to track new campaign for Black Friday but IT release doesn’t allow them to do so.
  4. Managing several s_code for many sub domains is a big headache and a single code error results in huge data loss.

It is really frustrating in daily analytics activities when sitecatalyst consultant struggles with s_code.js file when some tags do not get set the way they want. To deal with such issues adobe analytics really have something beyond s_code file. App measurement.js (Light js) and Dynamic Tag Management are in demand solutions from adobe which may resolve several complexity and dependencies for clients.

App measurement.js is not a new offering from adobe but it has quite a while in use. This js file is very light and loads much faster than s_code.js file and will reduce your sleepless nights. It offers same flexibility as s_code and works well with almost all sitecatalyst plugins (different version). So, I think you should try using appmeasurement.js file next time rather than going for s_code file. App Measurement has ability to support Visitor ID services and Heartbeat video integration

Tag management solution is also not new in the market. There are so many tag management solution such as Ensighten, Teliuem, Google Tag manager etc. which helps client to remove dependencies from IT release and unavailability of core development team.

Dynamic Tag Management aka DTM is a recent delight in adobe’s Digital Marketing suite from Search Discovery. DTM is a very powerful tool to keep your implementation intact without touching your application code enough.

You can implement more than one web analytics solution using it. Several benefits of having DTM on the table are-

  1. Change your codes whenever you want.
  2. Launch and track any marketing campaign during any time of the year.
  3. No scope of JavaScript error (Compiles JS script on the fly).

DTM comes free with standard sitecatalyst contract can be used with google analytics as well.

I hope you have now better idea to make a good choice before you start adobe analytics implementation.

Write to learnomics@outlook.com if you have any queries on this.