Open

Variables

There are 3 variables that should be set in every setup, so everything can work. These variables are persistent across all the setups and there is no need to change anything in them.

DLV - gtmMakeModel

This one holds the value of the Make and Model of the VDP. To create it:

Go to Variables (1), then New (2) , name the Variable “DLV - gtmMakeModel” (3) and click to select variable type (4):

Open

Select the variable type “Data Layer Variable”:

Set the value of the Data Layer Variable as “gtmMakeModel” (1) and hit Save (2):

DLV - gtmVin

This variable holds the value of the scraped VIN number. The setup is the same as the one for gtmMakeModel showed above, with 2 differences:

• Name the Variable “DLV - gtmVin”;

• Set the value of the variable as “gtmVin”:

DLV - pageType

This variable holds the value of the pagetype, which is used both as the value for AdWords custom parameter “pagetype” and for the custom event trigger for the Facebook Pixel. The setup is the same as the one for gtmMakeModel and gtmVin, with 2 differences:

• Name the Variable “DLV - pageType”;

• Set the value of the variable as “pageType”:

Triggers

There are 3 triggers that are used in the whole setup - one for the Main Script, the FB pixel and the AdWords Remarketing tag. As the variables - these triggers are the same across all installations and in 99% of the cases there is no need for any change there (there may be some very rare cases when change is needed, if the setup is not working, mostly because of conflicts with current setups on the site).

DOM Ready

This trigger is used for the main script. The idea is to ensure, that the HTML code is available when the script is scraping the VIN number. As it’s built in trigger - there is a chance to be already available for use in the GTM container. If it’s not - it just needs to be enabled:

Go to Triggers(1), then New (2) , name the Trigger “DOM Ready” (3) and click to select trigger type (4):

Select “DOM Ready” as trigger type (1) and leave it to “All DOM Ready Events” (2):

Click “SAVE” and it’s ready.

CE - dataReady

This trigger is used for firing the AdWords Remarketing tag. It’s a custom event, which shows the moment the main script finishes the VIN lookup, meaning all the data that needs to be passed to FB/AdWords is available.

The same as the DOM Ready trigger - Go to Triggers, then New, name the Trigger “CE - dataReady” and choose trigger type.

Select “Custom Event” as the trigger type(1) and set the Event Name as “dataReady” (2). Make sure the trigger is set to fire on “All Custom Events”.

Click “SAVE” and it’s ready.

NOTE: if the tag doesn’t fire in the debugger - try manually type “dataReady” instead of copy-pasting.

CE - dataReady - VDP Page

This trigger is used for firing the Facebook Dynamix Pixel. It’s the same as the “CE - dataReady” event, with only difference being targeted at VDP pages only.

The same as the rest - Go to Triggers, then New, name the Trigger “CE - dataReady - VDP Page” and choose trigger type.

Select “Custom Event” as the trigger type(1) and set the Event Name as “dataReady” (2). Set the trigger is set to fire on “Some Custom Events” (3). Set the conditions as: “DLV - pageType”, contains, “offerdetail” (4).

Tags

There are 3 sets of tags for the setup - the AdWords Remarketing Tag, the Facebook pixel tags and the main script.

AdWords Dynamic Remarketing

Go to Tags (1), “New” (2), name the Tag “Adwords Dynamic Remarketing”. (3) and choose tag type (4).

Select AdWords Remarketing as the tag type (1), Set the AdWords tag ID (2) and set the Custom Parameters to “Manually Specify” (3). Set 3 fields as following (4):

dynx_itemid > set it as “{{DLV - gtmMakeModel}}”;

dynx_itemid2 > set it as “{{DLV - gtmVin}}”;

dynx_pagetype > set it as “{{DLV - pageType}}”;

Click on “Triggering” (1) and set the trigger to “CE - dataReady” (2):

Facebook Pixel - Base

Same as AdWords - go to Tags > “New” > name the Tag “Facebook Pixel - Base” and choose tag type.

Select Custom HTML as the tag type (1), and add the FB remarketing code (2). You will need to replace the pixel ID with the correct one (3).

<script>

!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?

n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;

n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;

t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,

document,'script','https://connect.facebook.net/en_US/fbevents.js');

fbq('init', '0000000000000000');

fbq('track', 'PageView');

</script>

Set the trigger to the built in “All Pages”:

Facebook Pixel - VDP Page

Same as the other FB code - go to Tags > “New” > name the Tag “Facebook Pixel - VDP Page” and choose tag type as “Custom HTML.

Add the following code to the tag:

<script>

fbq('track', 'ViewContent', {

content_ids: '{{DLV - gtmVin}}',

content_type: 'vehicle'

});

</script>

Set the trigger to “CE - dataReady - VDP Page”.

HTML - Get makeModel

Go to Tags > “New” > name the Tag “HTML - Get makeModel” and choose tag type as “Custom HTML.

Set the trigger as “Dom Ready”

Add the following code to the tag (example for Dealer.com):

<script>

var gtmVin;

var pageType;

var makeModel;

var isVdp = document.querySelectorAll('html.vdp').length;

var isHome = /domain\.com\/$/.test(location.href);

function getPageType () {

if(isVdp) {

pageType = "offerdetail";

} else if(isHome) {

pageType = "homepage";

} else {

return "other";

}

return pageType;

}

//getting the vin according to the pagetype (should be changed according to the website)

function getVin() {

if(isVdp) {

gtmVin = document.querySelector('.vin .value').innerText;

}

return gtmVin;

}

//assign the values for the API call

gtmVin = getVin();

pageType = getPageType();

//getting the model with API Call

function getMakeModel() {

var getJSON = function(url, callback) {

var xhr = new XMLHttpRequest();

xhr.open('GET', url, true);

xhr.responseType = 'json';

xhr.onload = function() {

var status = xhr.status;

if (status == 200) {

callback(null, xhr.response);

} else {

callback(status);

}

};

xhr.send();

};

getJSON('https://vinapi.hootinteractive.net/id={{DealerID}}/{{DealerToken}}/'+gtmVin,

function(err, data) {

try {

makeModel = data.Make + " " + data.Model;

//console.log("Make/Model: " + gtmMakeModel );

dataLayer.push({"event": "dataReady", "gtmMakeModel": makeModel, "gtmVin": gtmVin, "pageType": pageType});

return makeModel;

} catch (err) {

//console.log("Invalid Vin");

dataLayer.push({"event": "dataReady", "gtmMakeModel": makeModel, "gtmVin": gtmVin, "pageType": pageType});

return "";

}

});

}

if(isVdp) {

getMakeModel();

} else {

dataLayer.push({"event": "dataReady", "pageType": pageType});

}

</script>

The 3 rows highlighted in red are the ones that need to be changed for each CMS.

At the end of the guide I’ll add directly the values that are used for the most common CMS platforms. They should be always tested first, as there may be some customization on place, or change in the CMS.

As we are currently updating the script installation method now you need 2 ID’s to set the script, highlighted in green. For the {{DealerID}} and the {{DealerToken}} values please reach out to hoot support!

var isVdp = document.querySelectorAll('html.vdp').length;

This row is used to set a boolean for the pagetype, if it’s VDP page or not. It should be boolean, which means - it should always return true or false.

The 2 types of setup here are either with:

test(location.href) - where a part of URL is persistent for all VDP pages (for example - ‘/\/vehicle-details\//.test(location.href);’ - when a part of the URL for VDP pages is /vehicle-details/)

querySelectorAll('x').length - where there is no option for filtering with the URL (for example - ‘document.querySelectorAll('html.vdp').length;‘ - where the VDP pages always return 1 - true, while the other pages are returning 0 - false)‘

The 1st option is pretty straightforward, for the second option there should be some pattern within the HTML code which should be used. Note: The pattern should be looked in the HTML after DOM Ready, when trying to find pattern after full load, and the used part was dynamically inserted - the script won’t detect it.

var isHome = /domain\.com\/$/.test(location.href);

This one is straightforward - the domain should be added (if the domain is .net - the ‘.com’ should be replaced too)

gtmVin = document.querySelector('.vin .value').innerText;

In this row the value should be the VIN code of the vehicle for the VDP page. It could be anything - from global variables (example: _trackingParams.VinNumberParam) trough query selectors (example: document.querySelector('.vin .value').innerText) to more custom options, like splitting part of text or URL (for example: ‘document.querySelector('.StockNo').innerText.split('# ')[1];’).

The important thing is the value to be the right one (if there are related vehicles on the VDP - their VIN is also in the code and their VIN’s shouldn’t be taken by mistake instead of the right one) and the pattern to return the VIN across all VDP pages.

Patterns for the most common CMS’s

Here are the most common CMS platforms and their respective values (excluding the ‘var isHome’ of course, as it’s not dependable by the CMS). There is always a chance for these not to work on some sites (due to customization). In this case the right values should be found manually.

Dealer.com

var isVdp = document.querySelectorAll('html.vdp').length;

gtmVin = document.querySelector('.vin .value').innerText.replace(' ','');

If the above gtmVin is not working - use this instead:

gtmVin = document.querySelector('[name="vin"]').value;

DealerOn

var isVdp = document.querySelectorAll('.VDPinfoBar').length;

OR if it doesn’t work:

var isVdp = document.querySelectorAll('.vdp').length;

gtmVin = document.querySelector('[data-vin]').dataset.vin;

Dealer Fire

var isVdp = /\/vehicle-details\//.test(location.href);

gtmVin = document.querySelector('[itemprop="serialNumber"]').content;

CDK Global

var isVdp = /\/VehicleDetails\//.test(location.href);

gtmVin = document.querySelector('[itemprop="vehicleIdentificationNumber"]').innerText;

In some cases this one above for gtmVin won’t work. In these cases (ONLY in these cases) use the one below. This one is always working on CDK Global sites, but it pulls the wrong VIN if the first option is working too.

gtmVin = document.querySelector('[data-vin]').dataset.vin;

FordDirect

Currently there are 2 main types of Ford Direct sites - Dealer.com ones and DealerOn ones. You can use the setups for the original CMS depending which Ford Direct site it is.

Dealer E-process

var isVdp = /\/auto\//.test(location.href);

gtmVin = document.querySelector('[itemprop="serialNumber"]').content;

FusionZone

var isVdp = /\/detail\//.test(location.href);

OR

var isVdp = /\/vehicle-details\//.test(location.href);

gtmVin = document.URL.split('/')[document.URL.split('/').length-1]

OR

gtmVin = document.querySelector('[itemprop="serialNumber"]').content;

Dealer Inspire

var isVdp = /\/inventory\//.test(location.href);

gtmVin = document.querySelector('[itemprop="serialNumber"]').content;

eBizAuto

var isVdp = document.querySelectorAll('#vdp').length;

gtmVin = _trackingParams.VinNumberParam;

CarBase

var isVdp = /\/details\//.test(location.href);

gtmVin = document.querySelector('[data-cb-detail="vin"] [data-cb-value]').innerText;

Dealer Car Search

var isVdp = /\/Details.aspx/.test(location.href);

gtmVin = document.querySelector('[data-vin]').dataset.vin;

PorscheOEM

var isVdp = /\/detail-/.test(location.href);

gtmVin = _trackingParams.VinNumberParam;

PixelMotion

var isVdp = /\/inventory\/display\//.test(location.href);

gtmVin = document.querySelector('.vdp-vin span').innerText;

Fox Dealer

var isVdp = document.querySelectorAll('#vdp').length;

gtmVin = document.querySelector('[data-vin]').dataset.vin;

Alternative Fox Dealer values (if the ones above are not working):

var isVdp = document.querySelectorAll('.vdpDetails').length;

gtmVin = document.querySelector('[data-vehicle="vin"]').innerText;

Remora (Pagination)

var isVdp = document.querySelectorAll('#vehicle_details').length;

gtmVin = document.querySelector('[data-vin]').dataset.vin;

Cars for Sale

var isVdp = /\/details\//.test(location.href);

gtmVin = document.querySelectorAll('.inventory-info div.c-table .c-tablecell')[document.querySelectorAll('.inventory-info div.c-table .c-tablecell').length-3].innerText

Jazel

var isVdp = /\/vehicle\//.test(location.href);

gtmVin = document.querySelector('[itemprop="vehicleIdentificationNumber"]').innerText;

Important note: for the Jazel CMS additional trigger should be done, for the AJAX loading of VDP, when the VDP is not directly accessed. The most common trigger is Custom Event one :

Name: CE - vdpView, Type - custom event, Value - itemprop="model".

If this one doesn’t work after testing - most probably custom trigger using the historyChange ebent should be used, it’s on “per website” basis.

This trigger should be added to the HTML - Get makeModel tag, along with the Dom Ready one. It is possible this event not to work and to need custom trigger, so for Jazel - debugging is a must!

The script will work even without that extra trigger, but all the visitors that didn’t accessed the VDP pag directly won’t be registered at all, so not recommended installing this one without the extra trigger, it will greatly hinder the effect of the remarketing tag.

Known side effect - accessing directly VDP page would double trigger the script, while not optimal - it won’t have any bad effect at all in the remarketing script functionality, just possible “warnings” in the Chrome FB pixel helper addon. It behave as if the user get to the VDP page and refreshed it. While this could be avoided - it includes way more complex setup, so in order to keep things simple - it’s accepted downside, as it doesn’t have any performance downside, just warning in the FB helper extension itself.

Dealer Peak

var isVdp = document.querySelectorAll('#car-detail-container').length;

gtmVin = document.querySelector('#car-detail-container').dataset.vin;

Important notes

More often than not they may be already existing Facebook or AdWords tags in the container. When there are such - if there are duplicates they should be removed.

There is no pattern here - every client may name them or set them differently. The tags should be reviewed, and if there are existing AdWords or Facebook tags, which are with the same ID as the requested ones - they should be deleted (or updated, and not using the Hoot ones).

If there are such tags, but the Facebook Pixel ID or the AdWords Remarketing ID are different - they should be left.

The only exception when the duplicated tags shouldn’t be deleted is if there are custom usages (for example - the Facebook pixel tag is used as trigger for another facebook events - in this case deleting the tag will break other custom tracking, so it shouldn’t be deleted).

Testing

For testing if the installation works properly you can check this video:

https://help.hootinteractive.net/docs/dynamic-display/dynamic-remarketing-tag-installation/video-testing-dynamic-remarketing-tag-installations/

Help

For any questions about the script installations - reach out to emil@hootinteractive.com.