There are a number of Dotdigital scripts you can add to your site through your Content Management System (CMS), which allow you to collect and transfer data, and trigger certain actions, across both systems.
You can add scripts to your entire Drupal site using a custom module, or by editing the site theme. You can also edit the HTML of a specific page to add a Dotdigital signup form or survey.
Add scripts to your entire site
The following amendments to your Drupal site must be performed by your web developers.
⚠️The scripts provided here are examples and must not be copied. You can find the scripts you need in your Dotdigital account.
Learn more about the available scripts in Integrate Dotdigital with your CMS.
Option 1: Use a custom module
1. Create a custom module
If you don't have a custom module already, you must create one.
A custom module typically consists of:
a folder with the module name
an
.info.ymlfilea
.modulefile.
For example, create a folder named my_custom_module and add my_custom_module.info.yml and my_custom_module.module files to it.
2. Edit the .info.yml file
Open the my_custom_module.info.yml file and add the following content:
Name | My Custom Module |
Type | module |
Description | A custom module to include the chat script, ROI tracking script, and cart insight script. |
Package | Custom |
core_version_requirement | ^8 || ^9 |
3. Edit the .module file
Open the my_custom_module.module file and add the following PHP code to implement hook_page_attachments:
This example uses the script for Dotdigital Chat.
<?php
/**
* Implements hook_page_attachments().
*/
function my_custom_module_page_attachments(array &$attachments) {
$attachments['#attached']['html_head'][] = [
[
'#type' => 'html_tag',
'#tag' => 'script',
'#attributes' => [
'type' => 'text/javascript',
],
'#value' => "
window._ddgChatConfig = {
apiSpace: '9ec294be-1bd9-4714-8fe7-73bab454c263',
urlBase: 'https://webchat.dotdigital.com'
};
(function(d, s, id){
var js, cjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = 'https://webchat.dotdigital.com/widget/bootstrap.js';
cjs.parentNode.insertBefore(js, cjs);
}(document, 'script', 'ddg-chat-widget'));
",
],
];
}
4. Enable the custom module
In the Drupal administration interface, go to Extend > Modules.
Find the custom module you created in step 1, select the checkbox next to it, and then select Install.
Example
To add the Web behavior tracking script you would add:
$attachments['#attached']['html_head'][] = [
[
'#type' => 'html_tag',
'#tag' => 'script',
'#attributes' => [
'type' => 'text/javascript',
],
'#value' => "
(function(w, d, u, t, o, c) {
w['dmtrackingobjectname'] = o;
c = d.createElement(t);
c.async = 1;
c.src = u;
t = d.getElementsByTagName(t)[0];
t.parentNode.insertBefore(c, t);
w[o] = w[o] || function() {
(w[o].q = w[o].q || []).push(arguments);
};
})(window, document, '//static.trackedweb.net/js/_dmptv4.js', 'script', 'dmPt');
window.dmPt('create', 'DM-SAMPLE-01');
Option 2: Edit your site theme
Go to your theme's folder.
This is usually located in the /themes directory of your Drupal installation.Open the
html.html.twigfile, which is usually located in your theme's /templates folder.
If you don't have anhtml.html.twigfile, you can copy it from the Drupal core stable theme located at/core/themes/stable/templates/layout.Insert your script just before the closing tag in the
html.html.twigfile:<script>
window._ddgChatConfig = {
apiSpace: '9ec294be-1bd9-4714-8fe7-73bab454c263',
urlBase: 'https://webchat.dotdigital.com'
};
(function(d, s, id){
var js, cjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = 'https://webchat.dotdigital.com/widget/bootstrap.js';
cjs.parentNode.insertBefore(js, cjs);
}(document, 'script', 'ddg-chat-widget'));
</script>
<script>
(function(w, d, u, t, o, c) {
w['dmtrackingobjectname'] = o;
c = d.createElement(t);
c.async = 1;
c.src = u;
t = d.getElementsByTagName(t)[0];
t.parentNode.insertBefore(c, t);
w[o] = w[o] || function() {
(w[o].q = w[o].q || []).push(arguments);
};
})(window, document, '//static.trackedweb.net/js/_dmptv4.js', 'script', 'dmPt');
window.dmPt('create', 'DM-SAMPLE-01');
// Page track feature
window.dmPt('track');
window.dmPt('track', { customVar: 'Hello', anotherKey: 'World' });
</script>After adding the scripts, you must clear your Drupal site's cache to see the changes. In the Drupal Administration panel, go to Configuration > Performance and select Clear all caches.
Add a script to an individual page
You can add a Dotdigital form to your Drupal site by editing the source code of an individual page.
You can also add a signup form to the footer, or other configurable area of your site.
Edit page HTML
Log in to the Drupal administration panel.
Expand the Manage drop-down menu and select Content.
Select the page you want to edit, or select Add content, then Basic page to create a new one.
If you want to add a popover, expand the Format drop-down menu and select Full HTML.
For an embedded form, skip this step.For Body, select Source.
Paste in the script you want to use.
Expand the Save as drop-down menu and select Published.
Select Save.
Add a block to the site footer
Availability of this option depends on your site theme.
Log in to the Drupal administration panel.
Select Structure, then select Block layout.
For Footer, select Place block.
Select Add content block, then select Basic block.
For Block description, enter a recognisable name, for example, Dotdigital form.
Expand the Text format drop-down menu and select Full HTML.
For Body, select Source.
Paste in your form embed code and select Save and configure.
Set your desired Visibility settings.
Expand the Region drop-down menu and select Footer.
Select Save block.
Optionally, drag the block to a different location in the list under Footer, to change to display order of your blocks.
Select Save blocks.
In addition to the instructions provided here, it’s also possible to use the Script Manager module to add JavaScript snippets to your Drupal site.